<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222"><meta name="generator" content="Hexo 7.3.0">

  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.ico">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.ico">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha256-wiz7ZSCn/btzhjKDQBms9Hx4sSeUYsDrTLg7roPstac=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancyapps-ui/5.0.28/fancybox/fancybox.css" integrity="sha256-6cQIC71/iBIYXFK+0RHAvwmjwWzkWd+r7v/BX3/vZDc=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pace/1.2.4/themes/green/pace-theme-minimal.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.2.4/pace.min.js" integrity="sha256-gqd7YTjg/BtfqWSwsJOvndl0Bxc8gFImLEkXQT8+qj0=" crossorigin="anonymous"></script>

<script class="next-config" data-name="main" type="application/json">{"hostname":"sumumm.github.io","root":"/","images":"/images","scheme":"Gemini","darkmode":false,"version":"8.19.2","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":{"enable":true,"style":"mac"},"fold":{"enable":true,"height":300},"bookmark":{"enable":false,"color":"#222","save":"auto"},"mediumzoom":false,"lazyload":true,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"stickytabs":false,"motion":{"enable":true,"async":true,"transition":{"menu_item":"fadeInDown","post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"},"path":"/search.xml","localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false}}</script><script src="/js/config.js"></script>

    <meta name="description" content="本文主要是自定义NexT主题相关笔记，若笔记中有错误或者不合适的地方，欢迎批评指正😃。">
<meta property="og:type" content="article">
<meta property="og:title" content="LV02-NexT-02-自定义一">
<meta property="og:url" content="https://sumumm.github.io/post/e88b47fb.html">
<meta property="og:site_name" content="苏木">
<meta property="og:description" content="本文主要是自定义NexT主题相关笔记，若笔记中有错误或者不合适的地方，欢迎批评指正😃。">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/03%E6%88%91%E7%9A%84%E5%8D%9A%E5%AE%A2/LV02-NexT-02-%E8%87%AA%E5%AE%9A%E4%B9%89%E4%B8%80/img/001Avatar.png">
<meta property="og:image" content="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/03%E6%88%91%E7%9A%84%E5%8D%9A%E5%AE%A2/LV02-NexT-02-%E8%87%AA%E5%AE%9A%E4%B9%89%E4%B8%80/img/003Scrollpercent.png">
<meta property="og:image" content="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/03%E6%88%91%E7%9A%84%E5%8D%9A%E5%AE%A2/LV02-NexT-02-%E8%87%AA%E5%AE%9A%E4%B9%89%E4%B8%80/img/002Copyright.png">
<meta property="og:image" content="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/03%E6%88%91%E7%9A%84%E5%8D%9A%E5%AE%A2/LV02-NexT-02-%E8%87%AA%E5%AE%9A%E4%B9%89%E4%B8%80/img/004Favicon.png">
<meta property="og:image" content="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/03%E6%88%91%E7%9A%84%E5%8D%9A%E5%AE%A2/LV02-NexT-02-%E8%87%AA%E5%AE%9A%E4%B9%89%E4%B8%80/img/image-20230618082730417.png">
<meta property="article:published_time" content="2023-07-02T08:16:56.000Z">
<meta property="article:modified_time" content="2025-06-13T16:25:57.073Z">
<meta property="article:author" content="苏木">
<meta property="article:tag" content="博客搭建">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/03%E6%88%91%E7%9A%84%E5%8D%9A%E5%AE%A2/LV02-NexT-02-%E8%87%AA%E5%AE%9A%E4%B9%89%E4%B8%80/img/001Avatar.png">


<link rel="canonical" href="https://sumumm.github.io/post/e88b47fb.html">



<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"zh-CN","comments":true,"permalink":"https://sumumm.github.io/post/e88b47fb.html","path":"post/e88b47fb.html","title":"LV02-NexT-02-自定义一"}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>LV02-NexT-02-自定义一 | 苏木</title>
  








    <script src="/js/browser_tools_disable.js"></script>

  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>
<!-- hexo injector head_end start --><link rel="stylesheet" href="https://unpkg.com/hexo-next-tags-plus@latest/lib/tag_plus.css" media="defer" onload="this.media='all'"><!-- hexo injector head_end end --></head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <div class="column">
      <header class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <p class="site-title">苏木</p>
      <i class="logo-line"></i>
    </a>
      <p class="site-subtitle" itemprop="description">我的学习之路</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger" aria-label="搜索" role="button">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>苏木的家</a></li><li class="menu-item menu-item-categories"><a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类页<span class="badge">42</span></a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档页<span class="badge">673</span></a></li><li class="menu-item menu-item-flink"><a href="/flink/" rel="section"><i class="fa fa-link fa-fw"></i>友人帐</a></li><li class="menu-item menu-item-about"><a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于我</a></li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup"><div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off" maxlength="80"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close" role="button">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div class="search-result-container no-result">
  <div class="search-result-icon">
    <i class="fa fa-spinner fa-pulse fa-5x"></i>
  </div>
</div>

    </div>
  </div>

</header>
        
  
  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%B8%80%E3%80%81%E4%B8%BB%E9%A2%98%E6%98%BE%E7%A4%BA"><span class="nav-text">一、主题显示</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-%E4%B8%BB%E9%A2%98%E6%A0%B7%E5%BC%8F%E4%BF%AE%E6%94%B9"><span class="nav-text">1. 主题样式修改</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-%E7%89%B9%E6%95%88%E5%AE%9E%E7%8E%B0"><span class="nav-text">2. 特效实现</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#2-1-%E9%BC%A0%E6%A0%87%E7%82%B9%E5%87%BB%E5%B0%8F%E7%BA%A2%E5%BF%83%E7%89%B9%E6%95%88"><span class="nav-text">2.1 鼠标点击小红心特效</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-2-%E5%8A%A8%E6%80%81%E4%B8%8B%E9%9B%AA%E7%89%B9%E6%95%88"><span class="nav-text">2.2 动态下雪特效</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#2-2-1-%E5%87%86%E5%A4%87%E5%B7%A5%E4%BD%9C"><span class="nav-text">2.2.1 准备工作</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-2-2-%E5%85%AD%E8%BE%B9%E5%BD%A2%E9%9B%AA%E8%8A%B1%E6%A0%B7%E5%BC%8F"><span class="nav-text">2.2.2 六边形雪花样式</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-2-3-%E5%9C%86%E5%BD%A2%E9%9B%AA%E8%8A%B1%E6%A0%B7%E5%BC%8F"><span class="nav-text">2.2.3 圆形雪花样式</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-2-4-%E5%BC%95%E7%94%A8"><span class="nav-text">2.2.4 引用</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-3-%E6%A8%B1%E8%8A%B1%E9%A3%98%E8%90%BD%E7%89%B9%E6%95%88"><span class="nav-text">2.3 樱花飘落特效</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#2-3-1-%E7%89%B9%E6%95%88%E5%AE%9E%E7%8E%B0%E8%84%9A%E6%9C%AC"><span class="nav-text">2.3.1 特效实现脚本</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-3-2-%E5%BC%95%E7%94%A8"><span class="nav-text">2.3.2 引用</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-%E5%9F%BA%E6%9C%AC%E9%85%8D%E7%BD%AE"><span class="nav-text">3. 基本配置</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#3-1-%E8%AE%BE%E7%BD%AE%E8%8F%9C%E5%8D%95"><span class="nav-text">3.1 设置菜单</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-2-%E8%AE%BE%E7%BD%AE%E5%A4%B4%E5%83%8F"><span class="nav-text">3.2 设置头像</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-3-Menu%E5%A2%9E%E5%8A%A0%E5%85%B3%E4%BA%8E%E3%80%81%E6%A0%87%E7%AD%BE%E3%80%81%E5%88%86%E7%B1%BB%E9%A1%B5%E9%9D%A2"><span class="nav-text">3.3 Menu增加关于、标签、分类页面</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#3-3-1-%E6%96%B0%E5%BB%BA%E7%9B%B8%E5%85%B3%E7%9A%84%E9%A1%B5%E9%9D%A2"><span class="nav-text">3.3.1 新建相关的页面</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#3-3-2-%E4%BF%AE%E6%94%B9%E7%9B%B8%E5%BA%94%E7%9A%84%E6%96%87%E4%BB%B6"><span class="nav-text">3.3.2 修改相应的文件</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-4-%E8%AE%BE%E7%BD%AE%E8%83%8C%E6%99%AF%E5%9B%BE%E7%89%87%E5%92%8C%E9%80%8F%E6%98%8E%E5%BA%A6"><span class="nav-text">3.4 设置背景图片和透明度</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#3-4-1-%E4%BF%AE%E6%94%B9%E4%B8%BB%E9%A2%98%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6"><span class="nav-text">3.4.1 修改主题配置文件</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#3-4-2-%E6%96%B0%E5%BB%BA%E5%B9%B6%E4%BF%AE%E6%94%B9styles-styl%E6%96%87%E4%BB%B6"><span class="nav-text">3.4.2 新建并修改styles.styl文件</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-5-%E6%96%87%E7%AB%A0%E7%9B%AE%E5%BD%95"><span class="nav-text">3.5 文章目录</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-6-%E4%BB%A3%E7%A0%81%E9%AB%98%E4%BA%AE%E4%B8%BB%E9%A2%98"><span class="nav-text">3.6 代码高亮主题</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-7-%E4%BB%A3%E7%A0%81%E5%9D%97%E5%A4%8D%E5%88%B6"><span class="nav-text">3.7 代码块复制</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-8-%E4%BE%A7%E8%BE%B9%E6%A0%8F%E6%98%BE%E7%A4%BA%E9%98%85%E8%AF%BB%E8%BF%9B%E5%BA%A6"><span class="nav-text">3.8 侧边栏显示阅读进度</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4-%E6%B6%89%E5%8F%8A%E6%BA%90%E7%A0%81%E4%BF%AE%E6%94%B9"><span class="nav-text">4. 涉及源码修改</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#4-1-%E6%B7%BB%E5%8A%A0%E7%89%88%E6%9D%83%E8%AF%B4%E6%98%8E"><span class="nav-text">4.1 添加版权说明</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4-2-%E6%B7%BB%E5%8A%A0%E7%BB%93%E6%9D%9F%E6%A0%87%E8%AE%B0"><span class="nav-text">4.2 添加结束标记</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4-3-%E4%BF%AE%E6%94%B9%E5%BA%95%E9%83%A8-%E6%A0%87%E7%AD%BE"><span class="nav-text">4.3 修改底部#标签</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4-4-%E5%8E%BB%E6%8E%89%E5%BA%95%E9%83%A8%E7%9A%84%E7%94%B1Hexo%E2%80%A6%E5%BC%BA%E5%8A%9B%E9%A9%B1%E5%8A%A8%E5%AD%97%E6%A0%B7"><span class="nav-text">4.4 去掉底部的由Hexo…强力驱动字样</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4-5-%E6%9B%B4%E6%8D%A2%E7%BD%91%E9%A1%B5%E9%A1%B6%E6%A0%8F%E9%BB%98%E8%AE%A4%E5%9B%BE%E6%A0%87"><span class="nav-text">4.5 更换网页顶栏默认图标</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4-6-%E9%A1%B5%E8%84%9A%E5%A2%9E%E5%8A%A0%E7%BD%91%E7%AB%99%E8%BF%90%E8%A1%8C%E6%97%B6%E9%97%B4%E7%BB%9F%E8%AE%A1"><span class="nav-text">4.6 页脚增加网站运行时间统计</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#5-%E9%9C%80%E8%A6%81%E5%AE%89%E8%A3%85%E6%8F%92%E4%BB%B6"><span class="nav-text">5. 需要安装插件</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#5-1-%E6%B7%BB%E5%8A%A0%E6%90%9C%E7%B4%A2%E5%8A%9F%E8%83%BD"><span class="nav-text">5.1 添加搜索功能</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#5-2-%E5%AD%97%E6%95%B0%E7%BB%9F%E8%AE%A1%E4%B8%8E%E9%98%85%E8%AF%BB%E6%97%B6%E9%95%BF"><span class="nav-text">5.2 字数统计与阅读时长</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#5-3-%E8%AE%BE%E7%BD%AERSS%E8%AE%A2%E9%98%85"><span class="nav-text">5.3 设置RSS订阅</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#5-4-%E6%B7%BB%E5%8A%A0%E9%9F%B3%E4%B9%90%E6%92%AD%E6%94%BE%E5%99%A8"><span class="nav-text">5.4 添加音乐播放器</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%BA%8C%E3%80%81%E7%AB%99%E7%82%B9%E8%AE%BE%E7%BD%AE"><span class="nav-text">二、站点设置</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-%E9%85%8D%E7%BD%AE%E5%8F%82%E6%95%B0%E8%AF%B4%E6%98%8E"><span class="nav-text">1. 配置参数说明</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-%E8%AE%BE%E7%BD%AE%E4%B8%AD%E6%96%87%E6%98%BE%E7%A4%BA"><span class="nav-text">2. 设置中文显示</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-%E6%8C%81%E4%B9%85%E5%8C%96%E9%93%BE%E6%8E%A5"><span class="nav-text">3. 持久化链接</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4-%E5%BC%80%E5%90%AF%E4%BB%A3%E7%A0%81%E9%AB%98%E4%BA%AE"><span class="nav-text">4. 开启代码高亮</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#5-%E5%9B%BE%E7%89%87%E5%BB%B6%E8%BF%9F%E5%8A%A0%E8%BD%BD"><span class="nav-text">5. 图片延迟加载</span></a></li></ol></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="苏木"
      src="/images/avatar.jpg">
  <p class="site-author-name" itemprop="name">苏木</p>
  <div class="site-description" itemprop="description">莫道桑榆晚，为霞尚满天</div>
</div>
<div class="site-state-wrap animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        <a href="/archives/">
          <span class="site-state-item-count">673</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
          <a href="/categories/">
        <span class="site-state-item-count">42</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
        <span class="site-state-item-count">43</span>
        <span class="site-state-item-name">标签</span>
      </div>
  </nav>
</div>
  <div class="links-of-author animated">
      <span class="links-of-author-item">
        <a href="https://github.com/sumumm" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;sumumm" rel="noopener me" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
  </div>

        </div>
      </div>
    </div>

    
  </aside>


    </div>

    <div class="main-inner post posts-expand">


  


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://sumumm.github.io/post/e88b47fb.html">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.jpg">
      <meta itemprop="name" content="苏木">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="苏木">
      <meta itemprop="description" content="莫道桑榆晚，为霞尚满天">
    </span>

    <span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
      <meta itemprop="name" content="LV02-NexT-02-自定义一 | 苏木">
      <meta itemprop="description" content="">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          LV02-NexT-02-自定义一
        </h1>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2023-07-02 16:16:56" itemprop="dateCreated datePublished" datetime="2023-07-02T16:16:56+08:00">2023-07-02</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/" itemprop="url" rel="index"><span itemprop="name">博客搭建</span></a>
        </span>
    </span>

  
    <span class="post-meta-break"></span>
    <span class="post-meta-item" title="本文字数">
      <span class="post-meta-item-icon">
        <i class="far fa-file-word"></i>
      </span>
      <span class="post-meta-item-text">本文字数：</span>
      <span>7.7k</span>
    </span>
    <span class="post-meta-item" title="阅读时长">
      <span class="post-meta-item-icon">
        <i class="far fa-clock"></i>
      </span>
      <span class="post-meta-item-text">阅读时长 &asymp;</span>
      <span>28 分钟</span>
    </span>
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody"><p>本文主要是自定义NexT主题相关笔记，若笔记中有错误或者不合适的地方，欢迎批评指正😃。</p>
<span id="more"></span>

<!-- Photo: https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/03%E6%88%91%E7%9A%84%E5%8D%9A%E5%AE%A2/LV02-NexT-02-%E8%87%AA%E5%AE%9A%E4%B9%89%E4%B8%80/img/ -->

<details class="folding-tag" blue><summary> 点击查看使用工具及版本 </summary>
              <div class='content'>
              <table>    <tr>        <td align="center" width=150px>Windows</td>        <td align="left">windows11</td>    </tr>    <tr>        <td align="center">Ubuntu</td>        <td align="left">Ubuntu16.04的64位版本</td>      </tr>    <tr>        <td align="center">VMware® Workstation 16 Pro</td>        <td align="left">16.2.3 build-19376536</td>      </tr></table>
              </div>
            </details>

<details class="folding-tag" blue><summary> 点击查看本文参考资料 </summary>
              <div class='content'>
              <table>    <tr><td align="center">参考方向  </td><td align="center">参考原文</td></tr>    <tr><td align="left">---</td><td align="left"><a href="" target="_blank">--- <i class="fa fa-external-link-alt"></i> </a></td></tr></table>
              </div>
            </details>

<details class="folding-tag" blue><summary> 点击查看相关文件下载 </summary>
              <div class='content'>
              <table>    <tr>        <td align="center">---</td>        <td align="left">--- <a href="" target="_blank">  <i class="fa fa-external-link-alt"></i></a></td>      </tr></table>
              </div>
            </details>

<p>这是我整理之前的笔记，可能已经不适用于新版本的了，仅供参考吧。</p>
<h1 id="一、主题显示"><a href="#一、主题显示" class="headerlink" title="一、主题显示"></a><font size=3>一、主题显示</font></h1><h2 id="1-主题样式修改"><a href="#1-主题样式修改" class="headerlink" title="1. 主题样式修改"></a><font size=3>1. 主题样式修改</font></h2><p><code>Scheme</code> 是 <code>NexT </code>提供的一种特性，借助于<code> Scheme</code>，<code>NexT </code>提供多种不同的外观。</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_">#</span><span class="language-bash">进入主题文件夹</span></span><br><span class="line">cd ~/02MyBlog/hexofiles/themes/next</span><br><span class="line"><span class="meta prompt_"># </span><span class="language-bash">选择自己想要的主题</span></span><br><span class="line">vim _config.yml</span><br></pre></td></tr></table></figure>

<p>主题配置部分如下(具体怎样可以自己修改查看，我使用的是第三个)</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Schemes</span></span><br><span class="line"><span class="comment">#scheme: Muse</span></span><br><span class="line"><span class="comment">#scheme: Mist</span></span><br><span class="line"><span class="attr">scheme:</span> <span class="string">Pisces</span></span><br><span class="line"><span class="comment">#scheme: Gemini</span></span><br></pre></td></tr></table></figure>

<h2 id="2-特效实现"><a href="#2-特效实现" class="headerlink" title="2. 特效实现"></a><font size=3>2. 特效实现</font></h2><h3 id="2-1-鼠标点击小红心特效"><a href="#2-1-鼠标点击小红心特效" class="headerlink" title="2.1 鼠标点击小红心特效"></a><font size=3>2.1 鼠标点击小红心特效</font></h3><p>按如下命令进入相应的文件夹</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"># </span><span class="language-bash">进入js文件夹</span></span><br><span class="line">cd ~/02MyBlog/hexofiles/themes/next/source/js/</span><br><span class="line"><span class="meta prompt_"># </span><span class="language-bash">新建特效实现文件</span></span><br><span class="line">vim myclicklove.js</span><br></pre></td></tr></table></figure>

<p>在<code>myclicklove.js</code>中添加如下代码</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">!<span class="keyword">function</span>(<span class="params">e,t,a</span>)&#123;<span class="keyword">function</span> <span class="title function_">n</span>(<span class="params"></span>)&#123;<span class="title function_">c</span>(<span class="string">&quot;.heart&#123;width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);&#125;.heart:after,.heart:before&#123;content: &#x27;&#x27;;width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;&#125;.heart:after&#123;top: -5px;&#125;.heart:before&#123;left: -5px;&#125;&quot;</span>),<span class="title function_">o</span>(),<span class="title function_">r</span>()&#125;<span class="keyword">function</span> <span class="title function_">r</span>(<span class="params"></span>)&#123;<span class="keyword">for</span>(<span class="keyword">var</span> e=<span class="number">0</span>;e&lt;d.<span class="property">length</span>;e++)d[e].<span class="property">alpha</span>&lt;=<span class="number">0</span>?(t.<span class="property">body</span>.<span class="title function_">removeChild</span>(d[e].<span class="property">el</span>),d.<span class="title function_">splice</span>(e,<span class="number">1</span>)):(d[e].<span class="property">y</span>--,d[e].<span class="property">scale</span>+=<span class="number">.004</span>,d[e].<span class="property">alpha</span>-=<span class="number">.013</span>,d[e].<span class="property">el</span>.<span class="property">style</span>.<span class="property">cssText</span>=<span class="string">&quot;left:&quot;</span>+d[e].<span class="property">x</span>+<span class="string">&quot;px;top:&quot;</span>+d[e].<span class="property">y</span>+<span class="string">&quot;px;opacity:&quot;</span>+d[e].<span class="property">alpha</span>+<span class="string">&quot;;transform:scale(&quot;</span>+d[e].<span class="property">scale</span>+<span class="string">&quot;,&quot;</span>+d[e].<span class="property">scale</span>+<span class="string">&quot;) rotate(45deg);background:&quot;</span>+d[e].<span class="property">color</span>+<span class="string">&quot;;z-index:99999&quot;</span>);<span class="title function_">requestAnimationFrame</span>(r)&#125;<span class="keyword">function</span> <span class="title function_">o</span>(<span class="params"></span>)&#123;<span class="keyword">var</span> t=<span class="string">&quot;function&quot;</span>==<span class="keyword">typeof</span> e.<span class="property">onclick</span>&amp;&amp;e.<span class="property">onclick</span>;e.<span class="property">onclick</span>=<span class="keyword">function</span>(<span class="params">e</span>)&#123;t&amp;&amp;<span class="title function_">t</span>(),<span class="title function_">i</span>(e)&#125;&#125;<span class="keyword">function</span> <span class="title function_">i</span>(<span class="params">e</span>)&#123;<span class="keyword">var</span> a=t.<span class="title function_">createElement</span>(<span class="string">&quot;div&quot;</span>);a.<span class="property">className</span>=<span class="string">&quot;heart&quot;</span>,d.<span class="title function_">push</span>(&#123;<span class="attr">el</span>:a,<span class="attr">x</span>:e.<span class="property">clientX</span>-<span class="number">5</span>,<span class="attr">y</span>:e.<span class="property">clientY</span>-<span class="number">5</span>,<span class="attr">scale</span>:<span class="number">1</span>,<span class="attr">alpha</span>:<span class="number">1</span>,<span class="attr">color</span>:<span class="title function_">s</span>()&#125;),t.<span class="property">body</span>.<span class="title function_">appendChild</span>(a)&#125;<span class="keyword">function</span> <span class="title function_">c</span>(<span class="params">e</span>)&#123;<span class="keyword">var</span> a=t.<span class="title function_">createElement</span>(<span class="string">&quot;style&quot;</span>);a.<span class="property">type</span>=<span class="string">&quot;text/css&quot;</span>;<span class="keyword">try</span>&#123;a.<span class="title function_">appendChild</span>(t.<span class="title function_">createTextNode</span>(e))&#125;<span class="keyword">catch</span>(t)&#123;a.<span class="property">styleSheet</span>.<span class="property">cssText</span>=e&#125;t.<span class="title function_">getElementsByTagName</span>(<span class="string">&quot;head&quot;</span>)[<span class="number">0</span>].<span class="title function_">appendChild</span>(a)&#125;<span class="keyword">function</span> <span class="title function_">s</span>(<span class="params"></span>)&#123;<span class="keyword">return</span><span class="string">&quot;rgb(&quot;</span>+~~(<span class="number">255</span>*<span class="title class_">Math</span>.<span class="title function_">random</span>())+<span class="string">&quot;,&quot;</span>+~~(<span class="number">255</span>*<span class="title class_">Math</span>.<span class="title function_">random</span>())+<span class="string">&quot;,&quot;</span>+~~(<span class="number">255</span>*<span class="title class_">Math</span>.<span class="title function_">random</span>())+<span class="string">&quot;)&quot;</span>&#125;<span class="keyword">var</span> d=[];e.<span class="property">requestAnimationFrame</span>=<span class="keyword">function</span>(<span class="params"></span>)&#123;<span class="keyword">return</span> e.<span class="property">requestAnimationFrame</span>||e.<span class="property">webkitRequestAnimationFrame</span>||e.<span class="property">mozRequestAnimationFrame</span>||e.<span class="property">oRequestAnimationFrame</span>||e.<span class="property">msRequestAnimationFrame</span>||<span class="keyword">function</span>(<span class="params">e</span>)&#123;<span class="built_in">setTimeout</span>(e,<span class="number">1e3</span>/<span class="number">60</span>)&#125;&#125;(),<span class="title function_">n</span>()&#125;(<span class="variable language_">window</span>,<span class="variable language_">document</span>);</span><br></pre></td></tr></table></figure>

<p>进入调用该文件的文件夹并打开相应的引用文件</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"># </span><span class="language-bash">进入文件所在文件夹</span></span><br><span class="line">cd ~/02MyBlog/hexofiles/themes/next/layout/</span><br><span class="line"><span class="meta prompt_"># </span><span class="language-bash">打开特效引用文件</span></span><br><span class="line">vim _layout.swig</span><br></pre></td></tr></table></figure>

<p>在文档末尾的<code>&lt;body&gt;&lt;/body&gt;</code>标签内(至少我目前还没有发现有问题，有问题再修改)添加如下代码：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 页面点击小红心 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">src</span>=<span class="string">&quot;/js/myclicklove.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="2-2-动态下雪特效"><a href="#2-2-动态下雪特效" class="headerlink" title="2.2 动态下雪特效"></a><font size=3>2.2 动态下雪特效</font></h3><h4 id="2-2-1-准备工作"><a href="#2-2-1-准备工作" class="headerlink" title="2.2.1 准备工作"></a><font size=3>2.2.1 准备工作</font></h4><p>首先进入特效配置的文件夹中去</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"># </span><span class="language-bash">进入特效配置文件夹</span></span><br><span class="line">cd ~/02MyBlog/hexofiles/themes/next/source/js/</span><br></pre></td></tr></table></figure>

<p>在调用以下特效代码实现文件之前需要先引入<code>jquery.min.js</code>(我没有深究这到底是什么，能用就好，能用就好，哈哈哈)，否则特效不会生效。编辑引用文件<code>_layout.swig</code></p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"># </span><span class="language-bash">编辑_layout.swig</span></span><br><span class="line">vim ~/02MyBlog/hexofiles/themes/next/layout/_layout.swig</span><br></pre></td></tr></table></figure>

<p>在<code>&lt;body&gt;&lt;/body&gt;</code>标签内添加以下代码</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">src</span>=<span class="string">&quot;//libs.baidu.com/jquery/1.8.3/jquery.min.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="2-2-2-六边形雪花样式"><a href="#2-2-2-六边形雪花样式" class="headerlink" title="2.2.2 六边形雪花样式"></a><font size=3>2.2.2 六边形雪花样式</font></h4><p>说明：这个特效的代码可以实现雪花飘落，但是下拉的时速度大于雪花飘落速度的时候，雪花就消失了，等一会才会落下来。</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"># </span><span class="language-bash">新建六边形雪花实现文件</span></span><br><span class="line">vim snow1.js</span><br></pre></td></tr></table></figure>

<p>添加如下代码</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*六边形雪花雪花飘落*/</span></span><br><span class="line">(<span class="keyword">function</span>(<span class="params">$</span>)&#123;</span><br><span class="line">	$.fn.<span class="property">snow</span> = <span class="keyword">function</span>(<span class="params">options</span>)&#123;</span><br><span class="line">	<span class="keyword">var</span> $flake = $(<span class="string">&#x27;&lt;div id=&quot;snowbox&quot; /&gt;&#x27;</span>).<span class="title function_">css</span>(&#123;<span class="string">&#x27;position&#x27;</span>: <span class="string">&#x27;absolute&#x27;</span>,<span class="string">&#x27;z-index&#x27;</span>:<span class="string">&#x27;9999&#x27;</span>, <span class="string">&#x27;top&#x27;</span>: <span class="string">&#x27;-50px&#x27;</span>&#125;).<span class="title function_">html</span>(<span class="string">&#x27;&amp;#10052;&#x27;</span>),</span><br><span class="line">	documentHeight 	= $(<span class="variable language_">document</span>).<span class="title function_">height</span>(),</span><br><span class="line">	documentWidth	= $(<span class="variable language_">document</span>).<span class="title function_">width</span>(),</span><br><span class="line">	defaults = &#123;</span><br><span class="line">		minSize		: <span class="number">10</span>,</span><br><span class="line">		maxSize		: <span class="number">20</span>,</span><br><span class="line">		newOn		: <span class="number">1000</span>,</span><br><span class="line">		flakeColor	: <span class="string">&quot;#AFDAEF&quot;</span> <span class="comment">/* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */</span></span><br><span class="line">	&#125;,</span><br><span class="line">	options	= $.<span class="title function_">extend</span>(&#123;&#125;, defaults, options);</span><br><span class="line">	<span class="keyword">var</span> interval= <span class="built_in">setInterval</span>( <span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">	<span class="keyword">var</span> startPositionLeft = <span class="title class_">Math</span>.<span class="title function_">random</span>() * documentWidth - <span class="number">100</span>,</span><br><span class="line">	startOpacity = <span class="number">0.5</span> + <span class="title class_">Math</span>.<span class="title function_">random</span>(),</span><br><span class="line">	sizeFlake = options.<span class="property">minSize</span> + <span class="title class_">Math</span>.<span class="title function_">random</span>() * options.<span class="property">maxSize</span>,</span><br><span class="line">	endPositionTop = documentHeight - <span class="number">200</span>,</span><br><span class="line">	endPositionLeft = startPositionLeft - <span class="number">500</span> + <span class="title class_">Math</span>.<span class="title function_">random</span>() * <span class="number">500</span>,</span><br><span class="line">	durationFall = documentHeight * <span class="number">10</span> + <span class="title class_">Math</span>.<span class="title function_">random</span>() * <span class="number">5000</span>;</span><br><span class="line">	$flake.<span class="title function_">clone</span>().<span class="title function_">appendTo</span>(<span class="string">&#x27;body&#x27;</span>).<span class="title function_">css</span>(&#123;</span><br><span class="line">		<span class="attr">left</span>: startPositionLeft,</span><br><span class="line">		<span class="attr">opacity</span>: startOpacity,</span><br><span class="line">		<span class="string">&#x27;font-size&#x27;</span>: sizeFlake,</span><br><span class="line">		<span class="attr">color</span>: options.<span class="property">flakeColor</span></span><br><span class="line">	&#125;).<span class="title function_">animate</span>(&#123;</span><br><span class="line">		<span class="attr">top</span>: endPositionTop,</span><br><span class="line">		<span class="attr">left</span>: endPositionLeft,</span><br><span class="line">		<span class="attr">opacity</span>: <span class="number">0.2</span></span><br><span class="line">	&#125;,durationFall,<span class="string">&#x27;linear&#x27;</span>,<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">		$(<span class="variable language_">this</span>).<span class="title function_">remove</span>()</span><br><span class="line">	&#125;);</span><br><span class="line">	&#125;, options.<span class="property">newOn</span>);</span><br><span class="line">    &#125;;</span><br><span class="line">&#125;)(jQuery);</span><br><span class="line">$(<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">    $.fn.<span class="title function_">snow</span>(&#123; </span><br><span class="line">	    <span class="attr">minSize</span>: <span class="number">5</span>, <span class="comment">/* 定义雪花最小尺寸 */</span></span><br><span class="line">	    <span class="attr">maxSize</span>: <span class="number">50</span>,<span class="comment">/* 定义雪花最大尺寸 */</span></span><br><span class="line">	    <span class="attr">newOn</span>: <span class="number">300</span>  <span class="comment">/* 定义密集程度，数字越小越密集 */</span></span><br><span class="line">    &#125;);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h4 id="2-2-3-圆形雪花样式"><a href="#2-2-3-圆形雪花样式" class="headerlink" title="2.2.3 圆形雪花样式"></a><font size=3>2.2.3 圆形雪花样式</font></h4><p>说明：这个特效的代码好像是没有全屏显示，具体的可能是参数设置问题，我后边用的是樱花的一个特效，那个比较好用。</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"># </span><span class="language-bash">新建圆形雪花特效文件</span></span><br><span class="line">vim snow2.js</span><br></pre></td></tr></table></figure>

<p>添加如下代码</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*圆形，就那种毛茸茸的感觉*/</span></span><br><span class="line"><span class="comment">/* 控制下雪 */</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">snowFall</span>(<span class="params">snow</span>) &#123;</span><br><span class="line">    <span class="comment">/* 可配置属性 */</span></span><br><span class="line">    snow = snow || &#123;&#125;;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">maxFlake</span> = snow.<span class="property">maxFlake</span> || <span class="number">200</span>;   <span class="comment">/* 最多片数 */</span></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">flakeSize</span> = snow.<span class="property">flakeSize</span> || <span class="number">10</span>;  <span class="comment">/* 雪花形状 */</span></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">fallSpeed</span> = snow.<span class="property">fallSpeed</span> || <span class="number">1</span>;   <span class="comment">/* 坠落速度 */</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* 兼容写法 */</span></span><br><span class="line">requestAnimationFrame = <span class="variable language_">window</span>.<span class="property">requestAnimationFrame</span> ||</span><br><span class="line">    <span class="variable language_">window</span>.<span class="property">mozRequestAnimationFrame</span> ||</span><br><span class="line">    <span class="variable language_">window</span>.<span class="property">webkitRequestAnimationFrame</span> ||</span><br><span class="line">    <span class="variable language_">window</span>.<span class="property">msRequestAnimationFrame</span> ||</span><br><span class="line">    <span class="variable language_">window</span>.<span class="property">oRequestAnimationFrame</span> ||</span><br><span class="line">    <span class="keyword">function</span>(<span class="params">callback</span>) &#123; <span class="built_in">setTimeout</span>(callback, <span class="number">1000</span> / <span class="number">60</span>); &#125;;</span><br><span class="line"></span><br><span class="line">cancelAnimationFrame = <span class="variable language_">window</span>.<span class="property">cancelAnimationFrame</span> ||</span><br><span class="line">    <span class="variable language_">window</span>.<span class="property">mozCancelAnimationFrame</span> ||</span><br><span class="line">    <span class="variable language_">window</span>.<span class="property">webkitCancelAnimationFrame</span> ||</span><br><span class="line">    <span class="variable language_">window</span>.<span class="property">msCancelAnimationFrame</span> ||</span><br><span class="line">	<span class="variable language_">window</span>.<span class="property">oCancelAnimationFrame</span>;</span><br><span class="line"><span class="comment">/* 开始下雪 */</span></span><br><span class="line">snowFall.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">start</span> = <span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="comment">/* 创建画布 */</span></span><br><span class="line">    snowCanvas.<span class="title function_">apply</span>(<span class="variable language_">this</span>);</span><br><span class="line">    <span class="comment">/* 创建雪花形状 */</span></span><br><span class="line">    createFlakes.<span class="title function_">apply</span>(<span class="variable language_">this</span>);</span><br><span class="line">    <span class="comment">/* 画雪 */</span></span><br><span class="line">    drawSnow.<span class="title function_">apply</span>(<span class="variable language_">this</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* 创建画布 */</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">snowCanvas</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="comment">/* 添加Dom结点 */</span></span><br><span class="line">    <span class="keyword">var</span> snowcanvas = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&quot;canvas&quot;</span>);</span><br><span class="line">    snowcanvas.<span class="property">id</span> = <span class="string">&quot;snowfall&quot;</span>;</span><br><span class="line">    snowcanvas.<span class="property">width</span> = <span class="variable language_">window</span>.<span class="property">innerWidth</span>;</span><br><span class="line">    snowcanvas.<span class="property">height</span> = <span class="variable language_">document</span>.<span class="property">body</span>.<span class="property">clientHeight</span>;</span><br><span class="line">    snowcanvas.<span class="title function_">setAttribute</span>(<span class="string">&quot;style&quot;</span>, <span class="string">&quot;position:absolute; top: 0; left: 0; z-index: 1; pointer-events: none;&quot;</span>);</span><br><span class="line">    <span class="variable language_">document</span>.<span class="title function_">getElementsByTagName</span>(<span class="string">&quot;body&quot;</span>)[<span class="number">0</span>].<span class="title function_">appendChild</span>(snowcanvas);</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">canvas</span> = snowcanvas;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">ctx</span> = snowcanvas.<span class="title function_">getContext</span>(<span class="string">&quot;2d&quot;</span>);</span><br><span class="line">    <span class="comment">/* 窗口大小改变的处理 */</span></span><br><span class="line">    <span class="variable language_">window</span>.<span class="property">onresize</span> = <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">        snowcanvas.<span class="property">width</span> = <span class="variable language_">window</span>.<span class="property">innerWidth</span>;</span><br><span class="line">        <span class="comment">/* snowcanvas.height = window.innerHeight */</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* 雪运动对象 */</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">flakeMove</span>(<span class="params">canvasWidth, canvasHeight, flakeSize, fallSpeed</span>) &#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">x</span> = <span class="title class_">Math</span>.<span class="title function_">floor</span>(<span class="title class_">Math</span>.<span class="title function_">random</span>() * canvasWidth);   <span class="comment">/* x坐标 */</span></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">y</span> = <span class="title class_">Math</span>.<span class="title function_">floor</span>(<span class="title class_">Math</span>.<span class="title function_">random</span>() * canvasHeight);  <span class="comment">/* y坐标 */</span></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">size</span> = <span class="title class_">Math</span>.<span class="title function_">random</span>() * flakeSize + <span class="number">2</span>;          <span class="comment">/* 形状 */</span></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">maxSize</span> = flakeSize;                           <span class="comment">/* 最大形状 */</span></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">speed</span> = <span class="title class_">Math</span>.<span class="title function_">random</span>() * <span class="number">1</span> + fallSpeed;         <span class="comment">/* 坠落速度 */</span></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">fallSpeed</span> = fallSpeed;                         <span class="comment">/* 坠落速度 */</span></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">velY</span> = <span class="variable language_">this</span>.<span class="property">speed</span>;                             <span class="comment">/* Y方向速度 */</span></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">velX</span> = <span class="number">0</span>;                                      <span class="comment">/* X方向速度 */</span></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">stepSize</span> = <span class="title class_">Math</span>.<span class="title function_">random</span>() / <span class="number">30</span>;                 <span class="comment">/* 步长 */</span></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">step</span> = <span class="number">0</span>                                       <span class="comment">/* 步数 */</span></span><br><span class="line">&#125;</span><br><span class="line">flakeMove.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">update</span> = <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">var</span> x = <span class="variable language_">this</span>.<span class="property">x</span>,</span><br><span class="line">        y = <span class="variable language_">this</span>.<span class="property">y</span>;</span><br><span class="line">    <span class="comment">/* 左右摆动(余弦) */</span></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">velX</span> *= <span class="number">0.98</span>;</span><br><span class="line">    <span class="keyword">if</span> (<span class="variable language_">this</span>.<span class="property">velY</span> &lt;= <span class="variable language_">this</span>.<span class="property">speed</span>) &#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">velY</span> = <span class="variable language_">this</span>.<span class="property">speed</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">velX</span> += <span class="title class_">Math</span>.<span class="title function_">cos</span>(<span class="variable language_">this</span>.<span class="property">step</span> += <span class="number">.05</span>) * <span class="variable language_">this</span>.<span class="property">stepSize</span>;</span><br><span class="line"></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">y</span> += <span class="variable language_">this</span>.<span class="property">velY</span>;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">x</span> += <span class="variable language_">this</span>.<span class="property">velX</span>;</span><br><span class="line">    <span class="comment">/* 飞出边界的处理 */</span></span><br><span class="line">    <span class="keyword">if</span> (<span class="variable language_">this</span>.<span class="property">x</span> &gt;= canvas.<span class="property">width</span> || <span class="variable language_">this</span>.<span class="property">x</span> &lt;= <span class="number">0</span> || <span class="variable language_">this</span>.<span class="property">y</span> &gt;= canvas.<span class="property">height</span> || <span class="variable language_">this</span>.<span class="property">y</span> &lt;= <span class="number">0</span>) &#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="title function_">reset</span>(canvas.<span class="property">width</span>, canvas.<span class="property">height</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">/* 飞出边界-放置最顶端继续坠落 */</span></span><br><span class="line">flakeMove.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">reset</span> = <span class="keyword">function</span>(<span class="params">width, height</span>) &#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">x</span> = <span class="title class_">Math</span>.<span class="title function_">floor</span>(<span class="title class_">Math</span>.<span class="title function_">random</span>() * width);</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">y</span> = <span class="number">0</span>;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">size</span> = <span class="title class_">Math</span>.<span class="title function_">random</span>() * <span class="variable language_">this</span>.<span class="property">maxSize</span> + <span class="number">2</span>;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">speed</span> = <span class="title class_">Math</span>.<span class="title function_">random</span>() * <span class="number">1</span> + <span class="variable language_">this</span>.<span class="property">fallSpeed</span>;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">velY</span> = <span class="variable language_">this</span>.<span class="property">speed</span>;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">velX</span> = <span class="number">0</span>;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">// 渲染雪花-随机形状（此处可修改雪花颜色！！！）</span></span><br><span class="line">flakeMove.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">render</span> = <span class="keyword">function</span>(<span class="params">ctx</span>) &#123;</span><br><span class="line">    <span class="keyword">var</span> snowFlake = ctx.<span class="title function_">createRadialGradient</span>(<span class="variable language_">this</span>.<span class="property">x</span>, <span class="variable language_">this</span>.<span class="property">y</span>, <span class="number">0</span>, <span class="variable language_">this</span>.<span class="property">x</span>, <span class="variable language_">this</span>.<span class="property">y</span>, <span class="variable language_">this</span>.<span class="property">size</span>);</span><br><span class="line">    snowFlake.<span class="title function_">addColorStop</span>(<span class="number">0</span>, <span class="string">&quot;rgba(255, 255, 255, 0.9)&quot;</span>);  <span class="comment">/* 此处是雪花颜色，默认是白色 */</span></span><br><span class="line">    snowFlake.<span class="title function_">addColorStop</span>(<span class="number">.5</span>, <span class="string">&quot;rgba(255, 255, 255, 0.5)&quot;</span>); <span class="comment">/* 若要改为其他颜色，请自行查 */</span></span><br><span class="line">    snowFlake.<span class="title function_">addColorStop</span>(<span class="number">1</span>, <span class="string">&quot;rgba(255, 255, 255, 0)&quot;</span>);    <span class="comment">/* 找16进制的RGB 颜色代码。 */</span></span><br><span class="line">    ctx.<span class="title function_">save</span>();</span><br><span class="line">    ctx.<span class="property">fillStyle</span> = snowFlake;</span><br><span class="line">    ctx.<span class="title function_">beginPath</span>();</span><br><span class="line">    ctx.<span class="title function_">arc</span>(<span class="variable language_">this</span>.<span class="property">x</span>, <span class="variable language_">this</span>.<span class="property">y</span>, <span class="variable language_">this</span>.<span class="property">size</span>, <span class="number">0</span>, <span class="title class_">Math</span>.<span class="property">PI</span> * <span class="number">2</span>);</span><br><span class="line">    ctx.<span class="title function_">fill</span>();</span><br><span class="line">    ctx.<span class="title function_">restore</span>();</span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">/* 创建雪花-定义形状 */</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">createFlakes</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">var</span> maxFlake = <span class="variable language_">this</span>.<span class="property">maxFlake</span>,</span><br><span class="line">        flakes = <span class="variable language_">this</span>.<span class="property">flakes</span> = [],</span><br><span class="line">        canvas = <span class="variable language_">this</span>.<span class="property">canvas</span>;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; maxFlake; i++) &#123;</span><br><span class="line">        flakes.<span class="title function_">push</span>(<span class="keyword">new</span> <span class="title function_">flakeMove</span>(canvas.<span class="property">width</span>, canvas.<span class="property">height</span>, <span class="variable language_">this</span>.<span class="property">flakeSize</span>, <span class="variable language_">this</span>.<span class="property">fallSpeed</span>))</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* 画雪 */</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">drawSnow</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">var</span> maxFlake = <span class="variable language_">this</span>.<span class="property">maxFlake</span>,</span><br><span class="line">        flakes = <span class="variable language_">this</span>.<span class="property">flakes</span>;</span><br><span class="line">    ctx = <span class="variable language_">this</span>.<span class="property">ctx</span>, canvas = <span class="variable language_">this</span>.<span class="property">canvas</span>, that = <span class="variable language_">this</span>;</span><br><span class="line">    <span class="comment">/* 清空雪花 */</span></span><br><span class="line">    ctx.<span class="title function_">clearRect</span>(<span class="number">0</span>, <span class="number">0</span>, canvas.<span class="property">width</span>, canvas.<span class="property">height</span>);</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> e = <span class="number">0</span>; e &lt; maxFlake; e++) &#123;</span><br><span class="line">        flakes[e].<span class="title function_">update</span>();</span><br><span class="line">        flakes[e].<span class="title function_">render</span>(ctx);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">/*  一帧一帧的画 */</span></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">loop</span> = <span class="title function_">requestAnimationFrame</span>(<span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">        drawSnow.<span class="title function_">apply</span>(that);</span><br><span class="line">    &#125;);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* 调用及控制方法 */</span></span><br><span class="line"><span class="keyword">var</span> snow = <span class="keyword">new</span> <span class="title function_">snowFall</span>(&#123;<span class="attr">maxFlake</span>:<span class="number">60</span>&#125;);</span><br><span class="line">snow.<span class="title function_">start</span>();</span><br></pre></td></tr></table></figure>

<h4 id="2-2-4-引用"><a href="#2-2-4-引用" class="headerlink" title="2.2.4 引用"></a><font size=3>2.2.4 引用</font></h4><p>以上两种样式，选一种用就可以了，然后修改调用特效代码引用文件<code>_layout.swig</code>。</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vim ~/02MyBlog/hexofiles/themes/next/layout/_layout.swig</span><br></pre></td></tr></table></figure>

<p>在上边引入的调用<code>jquery.min.js</code>文件的下方添加如下代码，<code>src=&quot;/js/snow1.js</code>表示要调用的特效实现文件的位置，我这里用了六边形雪花的特效，这里添加了一个屏幕宽度判断。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 雪花特效实现 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">var</span> windowWidth = $(<span class="variable language_">window</span>).<span class="title function_">width</span>();</span></span><br><span class="line"><span class="language-javascript">  <span class="keyword">if</span> (windowWidth &gt; <span class="number">480</span>) </span></span><br><span class="line"><span class="language-javascript">  &#123;</span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">document</span>.<span class="title function_">write</span>(<span class="string">&#x27;&lt;script type=&quot;text/javascript&quot; src=&quot;/js/snow1.js&quot;&gt;&lt;\/script&gt;&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">  &#125;</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="2-3-樱花飘落特效"><a href="#2-3-樱花飘落特效" class="headerlink" title="2.3 樱花飘落特效"></a><font size=3>2.3 樱花飘落特效</font></h3><p>该特效的实现过程与上边的雪花特效类似，我比较喜欢这一个，所以后来换成了这个。</p>
<h4 id="2-3-1-特效实现脚本"><a href="#2-3-1-特效实现脚本" class="headerlink" title="2.3.1 特效实现脚本"></a><font size=3>2.3.1 特效实现脚本</font></h4><p>由于所用的代码源码名称为<code>sakura</code>所以所有的特效文件名称也按这个名字来。</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"># </span><span class="language-bash">进入相应的文件夹</span></span><br><span class="line">cd ~/02MyBlog/hexofiles/themes/next/source/js/</span><br><span class="line"><span class="meta prompt_"># </span><span class="language-bash">新建js文件</span></span><br><span class="line">vim sakura.js</span><br><span class="line"><span class="meta prompt_"># </span><span class="language-bash">后续修改可以使用以下命令</span></span><br><span class="line">vim ~/02MyBlog/hexofiles/themes/next/source/js/sakura.js</span><br></pre></td></tr></table></figure>

<p>添加链接中的代码到<code>sakura.js</code>文件中。<code>sakura</code>特效代码：<a target="_blank" rel="noopener" href="https://cdn.jsdelivr.net/gh/1999cyx/cdn@2.0.2/js/sakura.js">sakura.js</a></p>
<h4 id="2-3-2-引用"><a href="#2-3-2-引用" class="headerlink" title="2.3.2 引用"></a><font size=3>2.3.2 引用</font></h4><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"># </span><span class="language-bash">打开引用文件</span></span><br><span class="line">vim ~/02MyBlog/hexofiles/themes/next/layout/_layout.swig</span><br></pre></td></tr></table></figure>

<p>这里注意，我把之前的两种效果都给屏蔽掉了，采用的方式是直接删除，但是通过这一个特效的添加发现其实可以通过变量来配置是否开启相应的特效效果。在刚才的<code>_layout.swig</code>文件中<code>&lt;body&gt;&lt;/body&gt;</code>内部引用以下代码。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 樱花特效 --&gt;</span></span><br><span class="line">&#123;% if theme.sakura.enable %&#125;</span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">async</span> <span class="attr">src</span>=<span class="string">&quot;/js/sakura.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">&#123;% endif %&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>主题配置文件修改</li>
</ul>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"># </span><span class="language-bash">打开主题配置文件</span></span><br><span class="line">vim ~/02MyBlog/hexofiles/themes/next/_config.yml</span><br></pre></td></tr></table></figure>

<p>添加以下代码：</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"># </span><span class="language-bash">樱花飘落动特效</span></span><br><span class="line">sakura:</span><br><span class="line">  enable: true</span><br></pre></td></tr></table></figure>

<h2 id="3-基本配置"><a href="#3-基本配置" class="headerlink" title="3. 基本配置"></a><font size=3>3. 基本配置</font></h2><h3 id="3-1-设置菜单"><a href="#3-1-设置菜单" class="headerlink" title="3.1 设置菜单"></a><font size=3>3.1 设置菜单</font></h3><p>菜单配置包括三个部分，第一是菜单项（名称和链接），第二是菜单项的显示文本，第三是菜单项对应的图标。<code>NexT </code>使用的是 <a target="_blank" rel="noopener" href="http://fontawesome.io/">Font Awesome</a> 提供的图标，<code>Font Awesome </code>提供了 <code>600+</code> 的图标，可以满足绝大的多数的场景，同时无须担心在<code> Retina</code> 屏幕下图标模糊的问题。</p>
<p>设定菜单内容对应的字段是 <code>menu</code>。菜单内容的设置格式是：<code>item name: link</code>。其中 <code>item name</code> 是一个名称，这个名称并不直接显示在页面上，它用于匹配图标以及翻译。</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"># </span><span class="language-bash">编辑相应主题配置文件</span></span><br><span class="line">vim ~/02MyBlog/hexofiles/themes/next/_config.yml</span><br></pre></td></tr></table></figure>

<p>文件如下</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># ------------------------------------------------------</span></span><br><span class="line"><span class="comment"># Menu Settings</span></span><br><span class="line"><span class="comment"># ------------------------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Usage: `Key: /link/ || icon`</span></span><br><span class="line"><span class="comment"># Key is the name of menu item. If the translation for t</span></span><br><span class="line"><span class="comment"># Value before `||` delimiter is the target link, value </span></span><br><span class="line"><span class="comment"># When running the site in a subdirectory (e.g. yoursite</span></span><br><span class="line"><span class="comment"># External url should start with http:// or https://</span></span><br><span class="line"><span class="attr">menu:</span></span><br><span class="line">  <span class="attr">home:</span> <span class="string">/</span> <span class="string">||</span> <span class="string">fa</span> <span class="string">fa-home</span></span><br><span class="line">  <span class="comment">#about: /about/ || fa fa-user</span></span><br><span class="line">  <span class="comment">#tags: /tags/ || fa fa-tags</span></span><br><span class="line">  <span class="comment">#categories: /categories/ || fa fa-th</span></span><br><span class="line">  <span class="attr">archives:</span> <span class="string">/archives/</span> <span class="string">||</span> <span class="string">fa</span> <span class="string">fa-archive</span></span><br><span class="line">  <span class="comment">#schedule: /schedule/ || fa fa-calendar</span></span><br><span class="line">  <span class="comment">#sitemap: /sitemap.xml || fa fa-sitemap</span></span><br><span class="line">  <span class="comment">#commonweal: /404/ || fa fa-heartbeat</span></span><br></pre></td></tr></table></figure>

<p>以下列出几项作为说明</p>
<table>
<thead>
<tr>
<th>键值</th>
<th>设定值</th>
<th>显示文本（简体中文）</th>
</tr>
</thead>
<tbody><tr>
<td>home</td>
<td><code>home: /</code></td>
<td>主页</td>
</tr>
<tr>
<td>archives</td>
<td><code>archives: /archives</code></td>
<td>归档页</td>
</tr>
<tr>
<td>categories</td>
<td><code>categories: /categories</code></td>
<td>分类页</td>
</tr>
<tr>
<td>tags</td>
<td><code>tags: /tags</code></td>
<td>标签页</td>
</tr>
<tr>
<td>about</td>
<td><code>about: /about</code></td>
<td>关于页面</td>
</tr>
<tr>
<td>commonweal</td>
<td><code>commonweal: /404.html</code></td>
<td>公益 404</td>
</tr>
</tbody></table>
<p>以简体中文为例，若需要添加一个菜单项，比如 <code>search</code>。那么就需要修改简体中文对应的翻译文件 <code>languages/zh-CN.yml</code>，在 <code>menu</code> 字段下添加一项</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">menu:</span></span><br><span class="line">   <span class="attr">home:</span> <span class="string">首页</span></span><br><span class="line">   <span class="attr">archives:</span> <span class="string">归档</span></span><br><span class="line">   <span class="attr">categories:</span> <span class="string">分类</span></span><br><span class="line">   <span class="attr">tags:</span> <span class="string">标签</span></span><br><span class="line">   <span class="attr">about:</span> <span class="string">关于</span>                                           </span><br><span class="line">   <span class="attr">search:</span> <span class="string">搜索</span></span><br><span class="line">   <span class="attr">schedule:</span> <span class="string">日程表</span></span><br><span class="line">   <span class="attr">sitemap:</span> <span class="string">站点地图</span></span><br><span class="line">   <span class="attr">commonweal:</span> <span class="string">公益</span> <span class="number">404</span></span><br></pre></td></tr></table></figure>

<h3 id="3-2-设置头像"><a href="#3-2-设置头像" class="headerlink" title="3.2 设置头像"></a><font size=3>3.2 设置头像</font></h3><p><code>URI</code>就是头像的地址，地址可以是以下的两种：</p>
<table>
<thead>
<tr>
<th>地址</th>
<th>值</th>
</tr>
</thead>
<tbody><tr>
<td>完整的互联网 URI</td>
<td><a target="_blank" rel="noopener" href="http://example.com/avatar.png">http://example.com/avatar.png</a></td>
</tr>
<tr>
<td>站点内的地址</td>
<td>将头像放置主题目录下的 source&#x2F;uploads&#x2F; （新建 uploads 目录若不存在）配置为：avatar: &#x2F;uploads&#x2F;avatar.png 或者 放置在 source&#x2F;images&#x2F; 目录下配置为：avatar: &#x2F;images&#x2F;avatar.png</td>
</tr>
</tbody></table>
<p>打开主题配置文件进行修改。</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vim ~/02MyBlog/hexofiles/themes/next/_config.yml</span><br></pre></td></tr></table></figure>

<p>修改为以下内容。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Sidebar Avatar</span></span><br><span class="line"><span class="attr">avatar:</span></span><br><span class="line">  <span class="comment"># Replace the default image and set the url here.</span></span><br><span class="line">  <span class="attr">url:</span> <span class="comment">#/images/avatar.gif</span></span><br><span class="line">  <span class="comment"># If true, the avatar will be dispalyed in circle.</span></span><br><span class="line">  <span class="attr">rounded:</span> <span class="literal">true</span>                                        </span><br><span class="line">  <span class="comment"># If true, the avatar will be rotated with the cursor.</span></span><br><span class="line">  <span class="attr">rotated:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>

<p>用该图片作为头像</p>
<img data-src="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/03%E6%88%91%E7%9A%84%E5%8D%9A%E5%AE%A2/LV02-NexT-02-%E8%87%AA%E5%AE%9A%E4%B9%89%E4%B8%80/img/001Avatar.png" alt="img" style="zoom:33%;" />

<h3 id="3-3-Menu增加关于、标签、分类页面"><a href="#3-3-Menu增加关于、标签、分类页面" class="headerlink" title="3.3 Menu增加关于、标签、分类页面"></a><font size=3>3.3 Menu增加关于、标签、分类页面</font></h3><h4 id="3-3-1-新建相关的页面"><a href="#3-3-1-新建相关的页面" class="headerlink" title="3.3.1 新建相关的页面"></a><font size=3>3.3.1 新建相关的页面</font></h4><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">hexo new page &quot;about&quot;</span><br><span class="line">hexo new page &quot;tags&quot;</span><br><span class="line">hexo new page &quot;categories&quot;</span><br></pre></td></tr></table></figure>

<p>新建完成之后会发现<code> ~/02MyBlog/hexofiles/source/</code>文件夹中多了三个文件夹</p>
<h4 id="3-3-2-修改相应的文件"><a href="#3-3-2-修改相应的文件" class="headerlink" title="3.3.2 修改相应的文件"></a><font size=3>3.3.2 修改相应的文件</font></h4><p>分别进入刚才新建的三个文件夹，修改<code>index.md</code>文件如下：</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="section">&lt;!--about中的index.md--&gt;</span></span><br><span class="line"><span class="section">---</span></span><br><span class="line">title: 关于</span><br><span class="line"><span class="section">type: &quot;about&quot;</span></span><br><span class="line"><span class="section">---</span></span><br><span class="line"><span class="section">&lt;!--tags中的index.md--&gt;</span></span><br><span class="line"><span class="section">---</span></span><br><span class="line">title: 标签</span><br><span class="line"><span class="section">type: &quot;tags&quot;</span></span><br><span class="line"><span class="section">---</span></span><br><span class="line"><span class="section">&lt;!--tags中的index.md--&gt;</span></span><br><span class="line"><span class="section">---</span></span><br><span class="line">title: 分类</span><br><span class="line"><span class="section">type: &quot;categories&quot;</span></span><br><span class="line"><span class="section">---</span></span><br></pre></td></tr></table></figure>

<h3 id="3-4-设置背景图片和透明度"><a href="#3-4-设置背景图片和透明度" class="headerlink" title="3.4 设置背景图片和透明度"></a><font size=3>3.4 设置背景图片和透明度</font></h3><h4 id="3-4-1-修改主题配置文件"><a href="#3-4-1-修改主题配置文件" class="headerlink" title="3.4.1 修改主题配置文件"></a><font size=3>3.4.1 修改主题配置文件</font></h4><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vim ~/02MyBlog/hexofiles/themes/next/_config.yml</span><br></pre></td></tr></table></figure>

<p>去掉<code>styles.styl</code>一行前边的<code>#</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Define custom file paths.</span></span><br><span class="line"><span class="comment"># Create your custom files in site directory `source/_da    ta` and uncomment needed files below.</span></span><br><span class="line"><span class="attr">custom_file_path:</span></span><br><span class="line">  <span class="comment">#head: source/_data/head.swig</span></span><br><span class="line">  <span class="comment">#header: source/_data/header.swig</span></span><br><span class="line">  <span class="comment">#sidebar: source/_data/sidebar.swig</span></span><br><span class="line">  <span class="comment">#postMeta: source/_data/post-meta.swig</span></span><br><span class="line">  <span class="comment">#postBodyEnd: source/_data/post-body-end.swig</span></span><br><span class="line">  <span class="comment">#footer: source/_data/footer.swig</span></span><br><span class="line">  <span class="comment">#bodyEnd: source/_data/body-end.swig</span></span><br><span class="line">  <span class="comment">#variable: source/_data/variables.styl</span></span><br><span class="line">  <span class="comment">#mixin: source/_data/mixins.styl</span></span><br><span class="line">  <span class="attr">style:</span> <span class="string">source/_data/styles.styl</span></span><br></pre></td></tr></table></figure>

<h4 id="3-4-2-新建并修改styles-styl文件"><a href="#3-4-2-新建并修改styles-styl文件" class="headerlink" title="3.4.2 新建并修改styles.styl文件"></a><font size=3>3.4.2 新建并修改<code>styles.styl</code>文件</font></h4><p>在站点根目录的<code>source</code>目录下新建<code>_data</code>文件夹，并新建<code>styles.styl</code>文件</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"># </span><span class="language-bash">进入文件夹</span></span><br><span class="line">cd ~/02MyBlog/hexofiles/source/</span><br><span class="line"><span class="meta prompt_"># </span><span class="language-bash">新建 _data 文件夹</span></span><br><span class="line">mkdir _data</span><br><span class="line"><span class="meta prompt_"># </span><span class="language-bash">新建并修改styles.styl文件</span></span><br><span class="line">vim styles.styl</span><br><span class="line"><span class="meta prompt_"># </span><span class="language-bash">后续用以下命令直接修改</span></span><br><span class="line">vim ~/02MyBlog/hexofiles/source/_data/styles.styl</span><br></pre></td></tr></table></figure>

<p>在<code>styles.styl</code>文件添加如下内容</p>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// Custom styles.</span></span><br><span class="line"><span class="comment">// 整体背景设置</span></span><br><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>:<span class="built_in">url</span>(/images/background.jpg);  <span class="comment">// 设定背景图片,images同处于source文件夹下</span></span><br><span class="line">    <span class="attribute">background-repeat</span>: no-repeat;  <span class="comment">// 设定背景图片非重复填充</span></span><br><span class="line">    <span class="attribute">background-attachment</span>:fixed;   <span class="comment">// 设置背景图片不随页面滚动</span></span><br><span class="line">    <span class="attribute">background-position</span>:<span class="number">50%</span> <span class="number">50%</span>;   <span class="comment">// 设置背景图片位置</span></span><br><span class="line">    <span class="attribute">opacity</span>: <span class="number">0.8</span>;</span><br><span class="line">	<span class="attribute">background-size</span>: cover// 设置保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>在生成静态页面的时候并会有如下警告(有说是因为<code>node</code>和<code>npm</code>版本太高)，但是并不影响背景的正常显示，可以忽略。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">(node:10806) Warning: Accessing non-existent property &#x27;lineno&#x27; of module exports inside circular dependency</span><br><span class="line">(Use `node --trace-warnings ...` to show where the warning was created)</span><br><span class="line">(node:10806) Warning: Accessing non-existent property &#x27;column&#x27; of module exports inside circular dependency</span><br><span class="line">(node:10806) Warning: Accessing non-existent property &#x27;filename&#x27; of module exports inside circular dependency</span><br><span class="line">(node:10806) Warning: Accessing non-existent property &#x27;lineno&#x27; of module exports inside circular dependency</span><br><span class="line">(node:10806) Warning: Accessing non-existent property &#x27;column&#x27; of module exports inside circular dependency</span><br><span class="line">(node:10806) Warning: Accessing non-existent property &#x27;filename&#x27; of module exports inside circular dependency</span><br></pre></td></tr></table></figure>

<h3 id="3-5-文章目录"><a href="#3-5-文章目录" class="headerlink" title="3.5 文章目录"></a><font size=3>3.5 文章目录</font></h3><p>我这边自己写文章的时候已经写了编号，所以需要关闭显示的时候的自动编号。</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vim ~/02MyBlog/hexofiles/themes/next/_config.yml</span><br></pre></td></tr></table></figure>

<p>修改主题配置文件如下：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Table of Contents in the Sidebar</span></span><br><span class="line"><span class="comment"># Front-matter variable (unsupport wrap expand_all).</span></span><br><span class="line"><span class="attr">toc:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># Automatically add list number to toc.</span></span><br><span class="line">  <span class="attr">number:</span> <span class="literal">false</span>                                         </span><br><span class="line">  <span class="comment"># If tr false [ID]     ll placed on next lines if head</span></span><br><span class="line">  <span class="attr">wrap:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># If true, all level of TOC in a post will be displaye</span></span><br><span class="line">  <span class="attr">expand_all:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Maximum heading depth of generated toc.</span></span><br><span class="line">  <span class="attr">max_depth:</span> <span class="number">6</span></span><br></pre></td></tr></table></figure>

<h3 id="3-6-代码高亮主题"><a href="#3-6-代码高亮主题" class="headerlink" title="3.6 代码高亮主题"></a><font size=3>3.6 代码高亮主题</font></h3><p>需要<strong>先将站点配置文件高亮代码设置打开</strong>，后边会说到，再编辑主题配置文件。</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vim ~/02MyBlog/hexofiles/themes/next/_config.yml</span><br></pre></td></tr></table></figure>

<p>选择相应的高亮的主题</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Code Highlight theme</span></span><br><span class="line"><span class="comment"># Available values: normal | night | night eighties | </span></span><br><span class="line"><span class="comment"># See: https://github.com/chriskempson/tomorrow-theme</span></span><br><span class="line"><span class="attr">highlight_theme:</span> <span class="string">night</span></span><br></pre></td></tr></table></figure>

<h3 id="3-7-代码块复制"><a href="#3-7-代码块复制" class="headerlink" title="3.7 代码块复制"></a><font size=3>3.7 代码块复制</font></h3><p> 在NexT7.x及以上的版本中直接开启复制功能即可。</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vim ~/02MyBlog/hexofiles/themes/next/_config.yml</span><br></pre></td></tr></table></figure>

<p>将以下设置为<code>true</code>，并选择代码块的风格。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">copy_button:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># Show text copy result.</span></span><br><span class="line">  <span class="attr">show_result:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># Available values: default | flat | mac</span></span><br><span class="line">  <span class="attr">style:</span> <span class="string">mac</span> </span><br></pre></td></tr></table></figure>

<h3 id="3-8-侧边栏显示阅读进度"><a href="#3-8-侧边栏显示阅读进度" class="headerlink" title="3.8 侧边栏显示阅读进度"></a><font size=3>3.8 侧边栏显示阅读进度</font></h3><ul>
<li>打开<code>scrollpercent</code>即可</li>
</ul>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"># </span><span class="language-bash">打开主题配置文件</span></span><br><span class="line">vim ~/02MyBlog/hexofiles/themes/next/_config.yml</span><br></pre></td></tr></table></figure>

<p>修改部分如下:</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Scroll percent label in b2t button.</span></span><br><span class="line"><span class="attr">scrollpercent:</span> <span class="literal">true</span> </span><br></pre></td></tr></table></figure>

<p>我打开之后，好像没有效果，应该是没有显示<code>top</code>按钮，这里把这个按钮在侧边栏开关打开，修改如下：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Back to top in sidebar.</span></span><br><span class="line"><span class="attr">sidebar:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>

<ul>
<li>效果如下图</li>
</ul>
<img data-src="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/03%E6%88%91%E7%9A%84%E5%8D%9A%E5%AE%A2/LV02-NexT-02-%E8%87%AA%E5%AE%9A%E4%B9%89%E4%B8%80/img/003Scrollpercent.png" alt="img" style="zoom: 80%;" />

<h2 id="4-涉及源码修改"><a href="#4-涉及源码修改" class="headerlink" title="4. 涉及源码修改"></a><font size=3>4. 涉及源码修改</font></h2><h3 id="4-1-添加版权说明"><a href="#4-1-添加版权说明" class="headerlink" title="4.1 添加版权说明"></a><font size=3>4.1 添加版权说明</font></h3><p>该段的优化，可以实现版权的正常显示，但是复制文章链接的功能只能在刷新后才可以使用，原因是后边添加音乐播放器的时候开启了<code>pjax</code>这就导致了后面鼠标点击后的复制操作不会被加载，目前还没有解决，只能刷新后恢复正常。</p>
<ul>
<li>（1）创建一个<code>my-copyright.swig</code>文件</li>
</ul>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"># </span><span class="language-bash">进入目标文件夹</span></span><br><span class="line">cd ~/02MyBlog/hexofiles/themes/next/layout/_macro/</span><br><span class="line"><span class="meta prompt_"># </span><span class="language-bash">新建mycopyright.swig，名字随意，下边对应就好</span></span><br><span class="line">vim my-copyright.swig</span><br><span class="line"><span class="meta prompt_"># </span><span class="language-bash">后续可以用以下命令直接修改该文件</span></span><br><span class="line">vim ~/02MyBlog/hexofiles/themes/next/layout/_macro/my-copyright.swig</span><br></pre></td></tr></table></figure>

<p>文件内容如下：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line">&#123;% if page.copyright %&#125;</span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;my_post_copyright&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  </span><br><span class="line">  <span class="comment">&lt;!-- JS库 sweetalert 可修改路径 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://unpkg.com/sweetalert/dist/sweetalert.min.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span><span class="tag">&lt;<span class="name">span</span>&gt;</span>文章标题:<span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;&#123;&#123; url_for(page.path) &#125;&#125;&quot;</span>&gt;</span>&#123;&#123; page.title &#125;&#125;<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span><span class="tag">&lt;<span class="name">span</span>&gt;</span>文章作者:<span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;/&quot;</span> <span class="attr">title</span>=<span class="string">&quot;访问 &#123;&#123; theme.author &#125;&#125; 的个人博客&quot;</span>&gt;</span>&#123;&#123; theme.author &#125;&#125;<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span><span class="tag">&lt;<span class="name">span</span>&gt;</span>发布时间:<span class="tag">&lt;/<span class="name">span</span>&gt;</span>&#123;&#123; page.date.format(&quot;YYYY年MM月DD日 - HH:mm&quot;) &#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span><span class="tag">&lt;<span class="name">span</span>&gt;</span>最后更新:<span class="tag">&lt;/<span class="name">span</span>&gt;</span>&#123;&#123; page.updated.format(&quot;YYYY年MM月DD日 - HH:mm&quot;) &#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span><span class="tag">&lt;<span class="name">span</span>&gt;</span>原始链接:<span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;&#123;&#123; url_for(page.path) &#125;&#125;&quot;</span> <span class="attr">title</span>=<span class="string">&quot;&#123;&#123; page.title &#125;&#125;&quot;</span>&gt;</span>&#123;&#123; page.permalink &#125;&#125;<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;copy-path&quot;</span>  <span class="attr">title</span>=<span class="string">&quot;点击复制文章链接&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fa fa-clipboard&quot;</span> <span class="attr">data-clipboard-text</span>=<span class="string">&quot;&#123;&#123; page.permalink &#125;&#125;&quot;</span>  <span class="attr">aria-label</span>=<span class="string">&quot;复制成功！&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span><span class="tag">&lt;<span class="name">span</span>&gt;</span>许可协议:<span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fa fa-creative-commons&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span> <span class="tag">&lt;<span class="name">a</span> <span class="attr">rel</span>=<span class="string">&quot;license&quot;</span> <span class="attr">href</span>=<span class="string">&quot;https://creativecommons.org/licenses/by-nc-nd/4.0/&quot;</span> <span class="attr">target</span>=<span class="string">&quot;_blank&quot;</span> <span class="attr">title</span>=<span class="string">&quot;Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)&quot;</span>&gt;</span>署名-非商业性使用-禁止演绎 4.0 国际<span class="tag">&lt;/<span class="name">a</span>&gt;</span> 转载请保留原文链接及作者。<span class="tag">&lt;/<span class="name">p</span>&gt;</span>  </span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"> </span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">var</span> clipboard = <span class="keyword">new</span> <span class="title class_">Clipboard</span>(<span class="string">&#x27;.fa-clipboard&#x27;</span>);</span></span><br><span class="line"><span class="language-javascript">    $(<span class="string">&quot;.fa-clipboard&quot;</span>).<span class="title function_">click</span>(<span class="keyword">function</span>(<span class="params"></span>)&#123;</span></span><br><span class="line"><span class="language-javascript">      clipboard.<span class="title function_">on</span>(<span class="string">&#x27;success&#x27;</span>, <span class="keyword">function</span>(<span class="params"></span>)&#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="title function_">swal</span>(&#123;   </span></span><br><span class="line"><span class="language-javascript">          <span class="attr">title</span>: <span class="string">&quot;&quot;</span>,   </span></span><br><span class="line"><span class="language-javascript">          <span class="attr">text</span>: <span class="string">&#x27;复制成功&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">          <span class="attr">icon</span>: <span class="string">&quot;success&quot;</span>, </span></span><br><span class="line"><span class="language-javascript">          <span class="attr">showConfirmButton</span>: <span class="literal">true</span></span></span><br><span class="line"><span class="language-javascript">          &#125;);</span></span><br><span class="line"><span class="language-javascript">	&#125;);</span></span><br><span class="line"><span class="language-javascript">    &#125;);  </span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">&#123;% endif %&#125;</span><br></pre></td></tr></table></figure>

<p><code>&lt;i class=&quot;far fa-copyright&quot;&gt;&lt;/i&gt;</code>这句话是在许可协议这行的，这是一个<code>Font Awesome </code>的版权的图标。</p>
<ul>
<li>（2）新建一个<code>my-post-copyright.styl</code>文件</li>
</ul>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"># </span><span class="language-bash">进入目标文件夹</span></span><br><span class="line">cd ~/02MyBlog/hexofiles/themes/next/source/css/_common/components/post/</span><br><span class="line"><span class="meta prompt_"># </span><span class="language-bash">新建my-post-copyright.styl，名字随意，下边对应就好</span></span><br><span class="line">vim my-post-copyright.styl</span><br><span class="line"><span class="meta prompt_"># </span><span class="language-bash">后续可以用以下命令直接修改该文件</span></span><br><span class="line">vim ~/02MyBlog/hexofiles/themes/next/source/css/_common/components/post/my-post-copyright.styl</span><br></pre></td></tr></table></figure>

<p>内容如下所示</p>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.my_post_copyright</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">85%</span>;</span><br><span class="line">  <span class="attribute">max-width</span>: <span class="number">45em</span>;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">2.8em</span> auto <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0.5em</span> <span class="number">1.0em</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#d3d3d3</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">0.93rem</span>;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">1.6em</span>;</span><br><span class="line">  <span class="attribute">word-break</span>: break-all;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">rgba</span>(<span class="number">255</span>,<span class="number">255</span>,<span class="number">255</span>,<span class="number">0.4</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.my_post_copyright</span> p&#123;<span class="attribute">margin</span>:<span class="number">0</span>;&#125;</span><br><span class="line"><span class="selector-class">.my_post_copyright</span> <span class="selector-tag">span</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: inline-block;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">5.2em</span>;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#b5b5b5</span>;</span><br><span class="line">  <span class="attribute">font-weight</span>: bold;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.my_post_copyright</span> <span class="selector-class">.raw</span> &#123;</span><br><span class="line">  <span class="attribute">margin-left</span>: <span class="number">1em</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">5em</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.my_post_copyright</span> <span class="selector-tag">a</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#808080</span>;</span><br><span class="line">  <span class="attribute">border-bottom</span>:<span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.my_post_copyright</span> <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#a3d2a3</span>;</span><br><span class="line">  <span class="attribute">text-decoration</span>: underline;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.my_post_copyright</span><span class="selector-pseudo">:hover</span> <span class="selector-class">.fa-clipboard</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#000</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.my_post_copyright</span> <span class="selector-class">.post-url</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">font-weight</span>: normal;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.my_post_copyright</span> <span class="selector-class">.copy-path</span> &#123;</span><br><span class="line">  <span class="attribute">margin-left</span>: <span class="number">1em</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">1em</span>;</span><br><span class="line">  +<span class="built_in">mobile</span>()&#123;<span class="attribute">display</span>:none;&#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.my_post_copyright</span> <span class="selector-class">.copy-path</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#808080</span>;</span><br><span class="line">  <span class="attribute">cursor</span>: pointer;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>（3）引用模板</li>
</ul>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"># </span><span class="language-bash">打开引用文件</span></span><br><span class="line">vim ~/02MyBlog/hexofiles/themes/next/layout/_macro/post.swig</span><br></pre></td></tr></table></figure>

<p>在以下代码之间</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 在以下之后 --&gt;</span></span><br><span class="line">&#123;%- if theme.follow_me %&#125;</span><br><span class="line">        &#123;&#123; partial(&#x27;_partials/post/post-followme.swig&#x27;, &#123;&#125;, &#123;cache: theme.cache.enable&#125;) &#125;&#125;</span><br><span class="line">&#123;%- endif %&#125;</span><br><span class="line"><span class="comment">&lt;!-- 在以下之前 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">footer</span> <span class="attr">class</span>=<span class="string">&quot;post-footer&quot;</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>添加以下代码</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!--添加版权信息--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">      &#123;% if not is_index %&#125;</span><br><span class="line">        &#123;% include &#x27;my-copyright.swig&#x27; %&#125;</span><br><span class="line">      &#123;% endif %&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>（4）引用样式文件</li>
</ul>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"># </span><span class="language-bash">打开引用文件</span></span><br><span class="line">vim ~/02MyBlog/hexofiles/themes/next/source/css/_common/components/post/post.styl</span><br></pre></td></tr></table></figure>

<p>在结尾添加以下代码：</p>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@import</span> <span class="string">&quot;my-post-copyright&quot;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>（5）设置新建文章自动显示版权声明</li>
</ul>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"># </span><span class="language-bash">打开相应文件</span></span><br><span class="line">vim ~/02MyBlog/hexofiles/scaffolds/post.md</span><br></pre></td></tr></table></figure>

<p>修改如下：</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: &#123;&#123; title &#125;&#125;</span><br><span class="line">date: &#123;&#123; date &#125;&#125;</span><br><span class="line">tags:</span><br><span class="line">copyright: true #新增copyright</span><br><span class="line">---  </span><br></pre></td></tr></table></figure>

<ul>
<li>（5）最终效果如下</li>
</ul>
<img data-src="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/03%E6%88%91%E7%9A%84%E5%8D%9A%E5%AE%A2/LV02-NexT-02-%E8%87%AA%E5%AE%9A%E4%B9%89%E4%B8%80/img/002Copyright.png" alt="img" style="zoom:50%;" />

<h3 id="4-2-添加结束标记"><a href="#4-2-添加结束标记" class="headerlink" title="4.2 添加结束标记"></a><font size=3>4.2 添加结束标记</font></h3><ul>
<li>新建一个结束标记实现文件</li>
</ul>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"># </span><span class="language-bash">进入目标文件夹</span></span><br><span class="line">cd ~/02MyBlog/hexofiles/themes/next/layout/_macro/</span><br><span class="line"><span class="meta prompt_"># </span><span class="language-bash">新建实现文件</span></span><br><span class="line">vim passage-end-tag.swig</span><br><span class="line"><span class="meta prompt_"># </span><span class="language-bash">后续可以用以下命令直接修改该文件</span></span><br><span class="line">vim ~/02MyBlog/hexofiles/themes/next/layout/_macro/passage-end-tag.swig</span><br></pre></td></tr></table></figure>

<p>在文件中添加以下内容：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    &#123;% if not is_index %&#125;</span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">&quot;text-align:center;color: #ccc;font-size:14px;&quot;</span>&gt;</span>--------------------------本文结束<span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fa fa-heart&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span>感谢您的阅读--------------------------<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    &#123;% endif %&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>引用</li>
</ul>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"># </span><span class="language-bash">打开引用文件</span></span><br><span class="line">vim ~/02MyBlog/hexofiles/themes/next/layout/_macro/post.swig</span><br></pre></td></tr></table></figure>

<p>在以下代码之间</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 在以下之后 --&gt;</span></span><br><span class="line">&#123;%- if theme.follow_me %&#125;</span><br><span class="line">        &#123;&#123; partial(&#x27;_partials/post/post-followme.swig&#x27;, &#123;&#125;, &#123;cache: theme.cache.enable&#125;) &#125;&#125;</span><br><span class="line">&#123;%- endif %&#125;</span><br><span class="line"><span class="comment">&lt;!-- 在以下之前 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">footer</span> <span class="attr">class</span>=<span class="string">&quot;post-footer&quot;</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>添加以下代码</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!--结束标记--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    &#123;% if not is_index %&#125;</span><br><span class="line">      &#123;% include &#x27;passage-end-tag.swig&#x27; %&#125;</span><br><span class="line">    &#123;% endif %&#125;</span><br><span class="line"> <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>配置主题配置文件</li>
</ul>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"># </span><span class="language-bash">打开主题配置文件</span></span><br><span class="line">vim ~/02MyBlog/hexofiles/themes/next/_config.yml </span><br></pre></td></tr></table></figure>

<p>添加以下代码：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 文章末尾添加“本文结束”标记</span></span><br><span class="line"><span class="attr">passage_end_tag:</span></span><br><span class="line">	<span class="attr">enabled:</span> <span class="literal">true</span> </span><br></pre></td></tr></table></figure>

<p><a target="_blank" rel="noopener" href="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/TheOldArticles/Hexo/NexT/003Scrollpercent.png">https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/TheOldArticles/Hexo/NexT/003Scrollpercent.png</a>)</p>
<h3 id="4-3-修改底部-标签"><a href="#4-3-修改底部-标签" class="headerlink" title="4.3 修改底部#标签"></a><font size=3>4.3 修改底部<code>#</code>标签</font></h3><ul>
<li>打开相应显示文件</li>
</ul>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vim ~/02MyBlog/hexofiles/themes/next/layout/_macro/post.swig </span><br></pre></td></tr></table></figure>

<p>找到如下代码：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">footer</span> <span class="attr">class</span>=<span class="string">&quot;post-footer&quot;</span>&gt;</span></span><br><span class="line">  &#123;%- if post.tags and post.tags.length %&#125;</span><br><span class="line">    &#123;%- if theme.tag_icon %&#125;</span><br><span class="line">      &#123;%- set tag_indicate = &#x27;<span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&quot;fa fa-tag&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span>&#x27; %&#125;</span><br><span class="line">    &#123;% else %&#125;</span><br><span class="line">      &#123;%- set tag_indicate = &#x27;#&#x27; %&#125;</span><br><span class="line">    &#123;%- endif %&#125;</span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;post-tags&quot;</span>&gt;</span></span><br><span class="line">      &#123;%- for tag in post.tags.toArray() %&#125;</span><br><span class="line">        <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;&#123;&#123; url_for(tag.path) &#125;&#125;&quot;</span> <span class="attr">rel</span>=<span class="string">&quot;tag&quot;</span>&gt;</span>&#123;&#123; tag_indicate &#125;&#125; &#123;&#123; tag.name &#125;&#125;<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">      &#123;%- endfor %&#125;</span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  &#123;%- endif %&#125;</span><br><span class="line"></span><br><span class="line">  &#123;&#123; partial(&#x27;_partials/post/post-footer.swig&#x27;, &#123;&#125;, &#123;cache: theme.cache.enable&#125;) &#125;&#125;</span><br><span class="line">                                                                                                                                        </span><br><span class="line">  &#123;&#123; post_nav(post) &#125;&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">footer</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>发现在主题配置文件中打开<code>tag_icon</code>就可以了。</p>
<ul>
<li>配置主题配置文件</li>
</ul>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"># </span><span class="language-bash">打开主题配置文件</span></span><br><span class="line">vim ~/02MyBlog/hexofiles/themes/next/_config.yml</span><br></pre></td></tr></table></figure>

<p>修改如下：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Use icon instead of the symbol # to indicate the tag at the bottom of the post</span></span><br><span class="line"><span class="attr">tag_icon:</span> <span class="literal">true</span> </span><br></pre></td></tr></table></figure>

<h3 id="4-4-去掉底部的由Hexo…强力驱动字样"><a href="#4-4-去掉底部的由Hexo…强力驱动字样" class="headerlink" title="4.4 去掉底部的由Hexo…强力驱动字样"></a><font size=3>4.4 去掉底部的由Hexo…强力驱动字样</font></h3><ul>
<li>按以下修改相应文件</li>
</ul>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"># </span><span class="language-bash">打开相应的文件</span></span><br><span class="line">vim ~/02MyBlog/hexofiles/themes/next/layout/_partials/footer.swig </span><br></pre></td></tr></table></figure>

<p>找到以下代码，注释掉中间的部分即可。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#123;%- if theme.footer.powered %&#125;</span><br><span class="line"><span class="comment">&lt;!--&lt;div class=&quot;powered-by&quot;&gt;</span></span><br><span class="line"><span class="comment">    &#123;%- set next_site = &#x27;https://theme-next.org&#x27; %&#125;</span></span><br><span class="line"><span class="comment">    &#123;%- if theme.scheme !== &#x27;Gemini&#x27; %&#125;</span></span><br><span class="line"><span class="comment">      &#123;%- set next_site = &#x27;https://&#x27; + theme.scheme | lower + &#x27;.theme-next.org&#x27; %&#125;</span></span><br><span class="line"><span class="comment">    &#123;%- endif %&#125;</span></span><br><span class="line"><span class="comment">    &#123;&#123;- __(&#x27;footer.powered&#x27;, next_url(&#x27;https://hexo.io&#x27;, &#x27;Hexo&#x27;, &#123;class: &#x27;theme-link&#x27;&#125;) + &#x27; &amp; &#x27; + next_url(next_site, &#x27;NexT.&#x27; + theme.scheme, &#123;class: &#x27;theme-link&#x27;&#125;)) &#125;&#125;</span></span><br><span class="line"><span class="comment">  &lt;/div&gt;</span></span><br><span class="line"><span class="comment">  --&gt;</span></span><br><span class="line">&#123;%- endif %&#125;</span><br></pre></td></tr></table></figure>

<p>其实也可以在主题配置文件中将<code>footer</code>中的<code>powered</code>设置为<code>false</code></p>
<h3 id="4-5-更换网页顶栏默认图标"><a href="#4-5-更换网页顶栏默认图标" class="headerlink" title="4.5 更换网页顶栏默认图标"></a><font size=3>4.5 更换网页顶栏默认图标</font></h3><ul>
<li>制作图片</li>
</ul>
<p>我使用的是一个在线图标制作免费软件，这个就是<a target="_blank" rel="noopener" href="http://www.bitbug.net/">比特虫</a>，网址如下：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">http://www.bitbug.net/</span><br></pre></td></tr></table></figure>

<p>目标尺寸32x32就可以，然后填写附加码，再生成保存就可以了文件可以直接保存到以下位置。</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">~/02MyBlog/hexofiles/themes/next/source/images/</span><br></pre></td></tr></table></figure>

<ul>
<li>修改该图标引用文件</li>
</ul>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vim ~/02MyBlog/hexofiles/themes/next/layout/_partials/head/head.swig</span><br></pre></td></tr></table></figure>

<p>找到如下代码：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#123;%- if theme.favicon.medium %&#125;                          </span><br><span class="line">  <span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">&quot;icon&quot;</span> <span class="attr">type</span>=<span class="string">&quot;image/png&quot;</span> <span class="attr">sizes</span>=<span class="string">&quot;32x32&quot;</span> <span class="attr">href</span>=<span class="string">&quot;    &#123;&#123; url_for(theme.favicon.medium) &#125;&#125;&quot;</span>&gt;</span></span><br><span class="line">&#123;%- endif %&#125;</span><br><span class="line">&#123;%- if theme.favicon.small %&#125;</span><br><span class="line">  <span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">&quot;icon&quot;</span> <span class="attr">type</span>=<span class="string">&quot;image/png&quot;</span> <span class="attr">sizes</span>=<span class="string">&quot;16x16&quot;</span> <span class="attr">href</span>=<span class="string">&quot;    &#123;&#123; url_for(theme.favicon.small) &#125;&#125;&quot;</span>&gt;</span></span><br><span class="line">&#123;%- endif %&#125;</span><br></pre></td></tr></table></figure>

<p>可以看到，这里有两种图标大小，由判断条件<code>theme.favicon.medium</code>可知，在主题配置文件中有相应的地方来设置该参数。</p>
<ul>
<li>配置主题配置文件</li>
</ul>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vim ~/02MyBlog/hexofiles/themes/next/_config.yml</span><br></pre></td></tr></table></figure>

<p>修改部分如下：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">favicon:</span></span><br><span class="line">  <span class="comment"># small: /images/favicon-16x16-next.png</span></span><br><span class="line">  <span class="comment"># medium: /images/favicon-32x32-next.png</span></span><br><span class="line">  <span class="attr">small:</span> <span class="string">/images/favicon16.ico</span></span><br><span class="line">  <span class="attr">medium:</span> <span class="string">/images/favicon32.ico</span>                        </span><br><span class="line">  <span class="attr">apple_touch_icon:</span> <span class="string">/images/apple-touch-icon-next.png</span></span><br><span class="line">  <span class="attr">safari_pinned_tab:</span> <span class="string">/images/logo.svg</span></span><br><span class="line">  <span class="comment">#android_manifest: /images/manifest.json</span></span><br><span class="line">  <span class="comment">#ms_browserconfig: /images/browserconfig.xml</span></span><br></pre></td></tr></table></figure>

<ul>
<li>效果如下所示</li>
</ul>
<img data-src="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/03%E6%88%91%E7%9A%84%E5%8D%9A%E5%AE%A2/LV02-NexT-02-%E8%87%AA%E5%AE%9A%E4%B9%89%E4%B8%80/img/004Favicon.png" alt="img" style="zoom:80%;" />

<h3 id="4-6-页脚增加网站运行时间统计"><a href="#4-6-页脚增加网站运行时间统计" class="headerlink" title="4.6 页脚增加网站运行时间统计"></a><font size=3>4.6 页脚增加网站运行时间统计</font></h3><ul>
<li>修改<code>footer.swig</code>文件</li>
</ul>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vim ~/02MyBlog/hexofiles/themes/next/layout/_partials/footer.swig</span><br></pre></td></tr></table></figure>

<p>  在适当的位置添加以下代码：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line">&lt;!--添加运行时间--&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">&quot;sitetime&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">language</span>=<span class="string">javascript</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">	<span class="keyword">function</span> <span class="title function_">siteTime</span>(<span class="params"></span>)&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">		<span class="variable language_">window</span>.<span class="built_in">setTimeout</span>(<span class="string">&quot;siteTime()&quot;</span>, <span class="number">1000</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">		<span class="keyword">var</span> seconds = <span class="number">1000</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">		<span class="keyword">var</span> minutes = seconds * <span class="number">60</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">		<span class="keyword">var</span> hours = minutes * <span class="number">60</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">		<span class="keyword">var</span> days = hours * <span class="number">24</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">		<span class="keyword">var</span> years = days * <span class="number">365</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">		<span class="keyword">var</span> today = <span class="keyword">new</span> <span class="title class_">Date</span>();</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">		<span class="keyword">var</span> todayYear = today.<span class="title function_">getFullYear</span>();</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">		<span class="keyword">var</span> todayMonth = today.<span class="title function_">getMonth</span>()+<span class="number">1</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">		<span class="keyword">var</span> todayDate = today.<span class="title function_">getDate</span>();</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">		<span class="keyword">var</span> todayHour = today.<span class="title function_">getHours</span>();</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">		<span class="keyword">var</span> todayMinute = today.<span class="title function_">getMinutes</span>();</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">		<span class="keyword">var</span> todaySecond = today.<span class="title function_">getSeconds</span>();</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">		<span class="comment">/* </span></span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"><span class="language-xml">		Date.UTC() -- 返回date对象距世界标准时间(UTC)1970年1月1日午夜之间的毫秒数(时间戳)</span></span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"><span class="language-xml">		year - 作为date对象的年份，为4位年份值</span></span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"><span class="language-xml">		month - 0-11之间的整数，做为date对象的月份</span></span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"><span class="language-xml">		day - 1-31之间的整数，做为date对象的天数</span></span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"><span class="language-xml">		hours - 0(午夜24点)-23之间的整数，做为date对象的小时数</span></span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"><span class="language-xml">		minutes - 0-59之间的整数，做为date对象的分钟数</span></span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"><span class="language-xml">		seconds - 0-59之间的整数，做为date对象的秒数</span></span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"><span class="language-xml">		microseconds - 0-999之间的整数，做为date对象的毫秒数</span></span></span></span><br><span class="line"><span class="comment"><span class="language-javascript"><span class="language-xml">        */</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">		<span class="keyword">var</span> t1 = <span class="title class_">Date</span>.<span class="title function_">UTC</span>(<span class="number">2020</span>,<span class="number">02</span>,<span class="number">13</span>,<span class="number">15</span>,<span class="number">00</span>,<span class="number">00</span>); <span class="comment">//北京时间2018-2-13 00:00:00</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">		<span class="keyword">var</span> t2 = <span class="title class_">Date</span>.<span class="title function_">UTC</span>(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">		<span class="keyword">var</span> diff = t2-t1;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">		<span class="keyword">var</span> diffYears = <span class="title class_">Math</span>.<span class="title function_">floor</span>(diff/years);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">		<span class="keyword">var</span> diffDays = <span class="title class_">Math</span>.<span class="title function_">floor</span>((diff/days)-diffYears*<span class="number">365</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">		<span class="keyword">var</span> diffHours = <span class="title class_">Math</span>.<span class="title function_">floor</span>((diff-(diffYears*<span class="number">365</span>+diffDays)*days)/hours);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">		<span class="keyword">var</span> diffMinutes = <span class="title class_">Math</span>.<span class="title function_">floor</span>((diff-(diffYears*<span class="number">365</span>+diffDays)*days-diffHours*hours)/minutes);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">		<span class="keyword">var</span> diffSeconds = <span class="title class_">Math</span>.<span class="title function_">floor</span>((diff-(diffYears*<span class="number">365</span>+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">		<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;sitetime&quot;</span>).<span class="property">innerHTML</span>=<span class="string">&quot; 已安全运行&quot;</span>+<span class="comment">/*diffYears+&quot; 年 &quot;+*/</span>diffDays+<span class="string">&quot; 天 &quot;</span>+diffHours+<span class="string">&quot; 小时 &quot;</span>+diffMinutes+<span class="string">&quot; 分钟 &quot;</span>+diffSeconds+<span class="string">&quot; 秒&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">	&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">	<span class="title function_">siteTime</span>();</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<h2 id="5-需要安装插件"><a href="#5-需要安装插件" class="headerlink" title="5. 需要安装插件"></a><font size=3>5. 需要安装插件</font></h2><h3 id="5-1-添加搜索功能"><a href="#5-1-添加搜索功能" class="headerlink" title="5.1 添加搜索功能"></a><font size=3>5.1 添加搜索功能</font></h3><ul>
<li>安装两个插件</li>
</ul>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"># </span><span class="language-bash">在站点根目录下分别安装插件</span></span><br><span class="line">npm install hexo-generator-search  --save</span><br><span class="line">npm install hexo-generator-searchdb --save</span><br><span class="line"><span class="meta prompt_"># </span><span class="language-bash">编辑相应文件</span></span><br><span class="line">vim ~/02MyBlog/hexofiles/_config.yml</span><br></pre></td></tr></table></figure>

<ul>
<li>配置站点文件</li>
</ul>
<p>在站点配置文件中添加如下内容</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">search:</span></span><br><span class="line">  <span class="attr">path:</span> <span class="string">search.xml</span></span><br><span class="line">  <span class="attr">field:</span> <span class="string">post</span></span><br><span class="line">  <span class="attr">format:</span> <span class="string">html</span></span><br><span class="line">  <span class="attr">limit:</span> <span class="number">10000</span></span><br></pre></td></tr></table></figure>

<ul>
<li>修改next主题配置文件<code>_config.yml</code></li>
</ul>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vim ~/02MyBlog/hexofiles/themes/next/_config.yml</span><br></pre></td></tr></table></figure>

<p>将<code> enable: false</code>改为<code>enable: true</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Local Search</span></span><br><span class="line"><span class="comment"># Dependencies: https://github.com/theme-next/hexo-gener</span></span><br><span class="line"><span class="attr">local_search:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span>                                          </span><br><span class="line">  <span class="comment"># If au true [ID]      ch by changing input.</span></span><br><span class="line">  <span class="comment"># If manual, trigger search by pressing enter key or s</span></span><br><span class="line">  <span class="attr">trigger:</span> <span class="string">auto</span></span><br><span class="line">  <span class="comment"># Show top n results per article, show all results by </span></span><br><span class="line">  <span class="attr">top_n_per_article:</span> <span class="number">1</span></span><br><span class="line">  <span class="comment"># Unescape html strings to the readable one.</span></span><br><span class="line">  <span class="attr">unescape:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Preload the search data when the page loads.</span></span><br><span class="line">  <span class="attr">preload:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure>

<h3 id="5-2-字数统计与阅读时长"><a href="#5-2-字数统计与阅读时长" class="headerlink" title="5.2 字数统计与阅读时长"></a><font size=3>5.2 字数统计与阅读时长</font></h3><ul>
<li>安装<code>hexo-symbols-count-time</code>插件</li>
</ul>
<p>插件地址：<a target="_blank" rel="noopener" href="https://github.com/theme-next/hexo-symbols-count-time">hexo-symbols-count-time</a></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://github.com/theme-next/hexo-symbols-count-time</span><br></pre></td></tr></table></figure>

<p>在站点根目录中执行以下命令安装该插件.</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i hexo-symbols-count-time --save</span><br></pre></td></tr></table></figure>

<ul>
<li>修改主题配置文件</li>
</ul>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"># </span><span class="language-bash">打开主题配置文件</span></span><br><span class="line">vim ~/02MyBlog/hexofiles/themes/next/_config.yml</span><br></pre></td></tr></table></figure>

<p>修改主题配置文件部分如下：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Post wordcount display settings</span></span><br><span class="line"> <span class="comment"># Dependencies: https://github.com/theme-next/hexo-symbols-count-time</span></span><br><span class="line"><span class="attr">symbols_count_time:</span></span><br><span class="line">  <span class="attr">separated_meta:</span> <span class="literal">true</span>  </span><br><span class="line">  <span class="attr">item_text_post:</span> <span class="literal">true</span> </span><br><span class="line">  <span class="attr">item_text_total:</span> <span class="literal">false</span> </span><br><span class="line">  <span class="attr">awl:</span> <span class="number">2</span></span><br><span class="line">  <span class="attr">wpm:</span> <span class="number">275</span></span><br></pre></td></tr></table></figure>

<p>参数说明:</p>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>separated_meta</td>
<td>是否换行显示字数统计和阅读时长</td>
</tr>
<tr>
<td>item_text_post</td>
<td>文章的字数统计、阅读时长用图标还是文本表示</td>
</tr>
<tr>
<td>item_text_total</td>
<td>博客底部统计字数统计、阅读时长使用图标还是 文本表示</td>
</tr>
<tr>
<td>awl(Average Word Length)</td>
<td>设定多少字符统计为一个字（word），中文博客需要设置为 2</td>
</tr>
<tr>
<td>wpm(Words Per Minute)</td>
<td>阅读时长1分钟需要统计多少字（word），官方阅读参考为:Slow ≈ 200;Normal ≈ 275;Fast ≈ 350</td>
</tr>
</tbody></table>
<ul>
<li>实现效果</li>
</ul>
<img data-src="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/03%E6%88%91%E7%9A%84%E5%8D%9A%E5%AE%A2/LV02-NexT-02-%E8%87%AA%E5%AE%9A%E4%B9%89%E4%B8%80/img/image-20230618082730417.png" alt="image-20230618082730417" style="zoom:50%;" />

<h3 id="5-3-设置RSS订阅"><a href="#5-3-设置RSS订阅" class="headerlink" title="5.3 设置RSS订阅"></a><font size=3>5.3 设置RSS订阅</font></h3><ul>
<li>安装<code>hexo-generator-feed</code>插件</li>
</ul>
<p>在站点根目录下执行以下命令：</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-generator-feed --save</span><br></pre></td></tr></table></figure>

<ul>
<li>配置站点配置文件</li>
</ul>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vim ~/02MyBlog/hexofiles/_config.yml</span><br></pre></td></tr></table></figure>

<p>修改部分如下(添加<code>plugins: hexo-generate-feed</code>)：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Extensions</span></span><br><span class="line"><span class="comment">## Plugins: https://hexo.io/plugins/</span></span><br><span class="line"><span class="comment">## Themes: https://hexo.io/themes/                      </span></span><br><span class="line"><span class="comment"># theme: landscape</span></span><br><span class="line"><span class="attr">theme:</span> <span class="string">next</span></span><br><span class="line"><span class="attr">plugins:</span> <span class="string">hexo-generate-feed</span></span><br></pre></td></tr></table></figure>

<ul>
<li>配置主题配置文件</li>
</ul>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vim ~/02MyBlog/hexofiles/themes/next/_config.yml</span><br></pre></td></tr></table></figure>

<p>修改部分如下(去掉<code>RSS</code>的注释)：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Subscribe through Telegram Channel, Twitter, etc.</span></span><br><span class="line"><span class="comment"># Usage: `Key: permalink || icon` (Font Awesome)</span></span><br><span class="line"><span class="attr">follow_me:</span></span><br><span class="line">  <span class="comment">#Twitter: https://twitter.com/username || fab fa-twit     ter</span></span><br><span class="line">  <span class="comment">#Telegram: https://t.me/channel_name || fab fa-telegr     am</span></span><br><span class="line">  <span class="comment">#WeChat: /images/wechat_channel.jpg || fab fa-weixin</span></span><br><span class="line">  <span class="attr">RSS:</span> <span class="string">/atom.xml</span> <span class="string">||</span> <span class="string">fa</span> <span class="string">fa-rss</span>  </span><br></pre></td></tr></table></figure>

<h3 id="5-4-添加音乐播放器"><a href="#5-4-添加音乐播放器" class="headerlink" title="5.4 添加音乐播放器"></a><font size=3>5.4 添加音乐播放器</font></h3><table>
<thead>
<tr>
<th>名称</th>
<th>点击链接访问相应网址</th>
</tr>
</thead>
<tbody><tr>
<td><code>APlayer</code></td>
<td><a target="_blank" rel="noopener" href="https://github.com/DIYgod/APlayer"><strong>Aplayer</strong></a></td>
</tr>
<tr>
<td><code>APlayer</code>中文文档</td>
<td><a target="_blank" rel="noopener" href="https://aplayer.js.org/#/zh-Hans/"><strong>APlayer中文文档</strong></a></td>
</tr>
<tr>
<td><code>hexo-tag-aplayer</code></td>
<td><a target="_blank" rel="noopener" href="https://github.com/MoePlayer/hexo-tag-aplayer"><strong>hexo-tag-aplayer</strong></a></td>
</tr>
<tr>
<td><code>hexo-tag-aplayer</code>中文文档</td>
<td><a target="_blank" rel="noopener" href="https://github.com/MoePlayer/hexo-tag-aplayer/blob/master/docs/README-zh_cn.md"><strong>hexo-tag-aplayer中文文档</strong></a></td>
</tr>
<tr>
<td><code>theme-next-pjax</code></td>
<td><a target="_blank" rel="noopener" href="https://github.com/theme-next/theme-next-pjax"><strong>theme-next-pjax</strong></a></td>
</tr>
</tbody></table>
<ul>
<li>安装<code>hexo-tag-aplayer</code></li>
</ul>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-tag-aplayer --save</span><br></pre></td></tr></table></figure>

<ul>
<li>修改<code>_layout.swig</code>文件</li>
</ul>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vim ~/02MyBlog/hexofiles/themes/next/layout/_layout.swig</span><br></pre></td></tr></table></figure>

<p>添加以下代码：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 引用依赖 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span> </span></span><br><span class="line"><span class="tag"> <span class="attr">href</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/meting@1.2.0/dist/Meting.min.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- APlayer本体 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;aplayer&quot;</span> </span></span><br><span class="line"><span class="tag">  <span class="attr">data-id</span>=<span class="string">&quot;7274703654&quot;</span> </span></span><br><span class="line"><span class="tag">  <span class="attr">data-server</span>=<span class="string">&quot;tencent&quot;</span> </span></span><br><span class="line"><span class="tag">  <span class="attr">data-type</span>=<span class="string">&quot;playlist&quot;</span> </span></span><br><span class="line"><span class="tag">  <span class="attr">data-fixed</span>=<span class="string">&quot;true&quot;</span> </span></span><br><span class="line"><span class="tag">  <span class="attr">data-autoplay</span>=<span class="string">&quot;true&quot;</span> </span></span><br><span class="line"><span class="tag">  <span class="attr">data-order</span>=<span class="string">&quot;random&quot;</span> </span></span><br><span class="line"><span class="tag">  <span class="attr">data-volume</span>=<span class="string">&quot;0.55&quot;</span> </span></span><br><span class="line"><span class="tag">  <span class="attr">data-theme</span>=<span class="string">&quot;#cc543a&quot;</span> </span></span><br><span class="line"><span class="tag">  <span class="attr">data-preload</span>=<span class="string">&quot;auto&quot;</span> &gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!--如果将本体放在body里面导致页面加载出现问题，请尝试放到body体后面--&gt;</span> </span><br></pre></td></tr></table></figure>

<p>这里支持不同的音乐平台，<code>id</code>就是自己歌单地址中的那一串数字。</p>
<table>
<thead>
<tr>
<th>选项</th>
<th>默认值</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>id</td>
<td><strong>必须值</strong></td>
<td>歌曲 id &#x2F; 播放列表 id &#x2F; 相册 id &#x2F; 搜索关键字</td>
</tr>
<tr>
<td>server</td>
<td><strong>必须值</strong></td>
<td>音乐平台: <code>netease</code>, <code>tencent</code>, <code>kugou</code>, <code>xiami</code>, <code>baidu</code></td>
</tr>
<tr>
<td>type</td>
<td><strong>必须值</strong></td>
<td><code>song</code>, <code>playlist</code>, <code>album</code>, <code>search</code>, <code>artist</code></td>
</tr>
<tr>
<td>fixed</td>
<td><code>false</code></td>
<td>开启固定模式</td>
</tr>
<tr>
<td>mini</td>
<td><code>false</code></td>
<td>开启迷你模式</td>
</tr>
<tr>
<td>loop</td>
<td><code>all</code></td>
<td>列表循环模式：<code>all</code>, <code>one</code>,<code>none</code></td>
</tr>
<tr>
<td>order</td>
<td><code>list</code></td>
<td>列表播放模式： <code>list</code>, <code>random</code></td>
</tr>
<tr>
<td>volume</td>
<td>0.7</td>
<td>播放器音量</td>
</tr>
<tr>
<td>lrctype</td>
<td>0</td>
<td>歌词格式类型</td>
</tr>
<tr>
<td>listfolded</td>
<td><code>false</code></td>
<td>指定音乐播放列表是否折叠</td>
</tr>
<tr>
<td>storagename</td>
<td><code>metingjs</code></td>
<td>LocalStorage 中存储播放器设定的键名</td>
</tr>
<tr>
<td>autoplay</td>
<td><code>true</code></td>
<td>自动播放，移动端浏览器暂时不支持此功能</td>
</tr>
<tr>
<td>mutex</td>
<td><code>true</code></td>
<td>该选项开启时，如果同页面有其他 aplayer 播放，该播放器会暂停</td>
</tr>
<tr>
<td>listmaxheight</td>
<td><code>340px</code></td>
<td>播放列表的最大长度</td>
</tr>
<tr>
<td>preload</td>
<td><code>auto</code></td>
<td>音乐文件预载入模式，可选项： <code>none</code>, <code>metadata</code>, <code>auto</code></td>
</tr>
<tr>
<td>theme</td>
<td><code>#ad7a86</code></td>
<td>播放器风格色彩设置</td>
</tr>
</tbody></table>
<ul>
<li>修改站点配置文件</li>
</ul>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vim ~/02MyBlog/hexofiles/_config.yml</span><br></pre></td></tr></table></figure>

<p>添加以下代码：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">aplayer:</span></span><br><span class="line">  <span class="attr">meting:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>

<ul>
<li><code>pjax</code>全局播放插件</li>
</ul>
<p>该插件可以使站点进行跳转的时候不继续播放(这里要注意,主题根目录中的<code>.gitignore</code>文件中忽略了所有的扩展包，如果不想重新下载，就可以修改文件，将其也添加到版本库中)。</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"># </span><span class="language-bash">进入主题文件夹根目录</span></span><br><span class="line">cd ~/02MyBlog/hexofiles/themes/next</span><br><span class="line"><span class="meta prompt_"># </span><span class="language-bash">下载插件源码</span></span><br><span class="line">git clone https://github.com/theme-next/theme-next-pjax source/lib/pjax</span><br></pre></td></tr></table></figure>

<p>修改主题配置文件，打开<code>pjax</code>。</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vim ~/02MyBlog/hexofiles/themes/next/_config.yml</span><br></pre></td></tr></table></figure>

<p>修改如下：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Easily enable fast Ajax navigation on your website.</span></span><br><span class="line"><span class="comment"># Dependencies: https://github.com/theme-next/theme-next-pjax</span></span><br><span class="line"><span class="attr">pjax:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>

<h1 id="二、站点设置"><a href="#二、站点设置" class="headerlink" title="二、站点设置"></a><font size=3>二、站点设置</font></h1><h2 id="1-配置参数说明"><a href="#1-配置参数说明" class="headerlink" title="1. 配置参数说明"></a><font size=3>1. 配置参数说明</font></h2><p>站点的一些配置参数如下</p>
<table>
<thead>
<tr>
<th>参数</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td><code>title</code></td>
<td>网站标题</td>
</tr>
<tr>
<td><code>subtitle</code></td>
<td>网站副标题</td>
</tr>
<tr>
<td><code>description</code></td>
<td>网站描述</td>
</tr>
<tr>
<td><code>keywords</code></td>
<td>网站的关键词。支援多个关键词。</td>
</tr>
<tr>
<td><code>author</code></td>
<td>名字</td>
</tr>
<tr>
<td><code>language</code></td>
<td>网站使用的语言。对于简体中文用户来说，使用不同的主题可能需要设置成不同的值，请参考你的主题的文档自行设置，常见的有 <code>zh-Hans</code>和 <code>zh-CN</code>。</td>
</tr>
<tr>
<td><code>timezone</code></td>
<td>网站时区。Hexo 默认使用电脑的时区。请参考 <a target="_blank" rel="noopener" href="https://en.wikipedia.org/wiki/List_of_tz_database_time_zones">时区列表</a> 进行设置，如 <code>America/New_York</code>, <code>Japan</code>, 和 <code>UTC</code> 。一般的，对于中国大陆地区可以使用 <code>Asia/Shanghai</code>。</td>
</tr>
</tbody></table>
<h2 id="2-设置中文显示"><a href="#2-设置中文显示" class="headerlink" title="2. 设置中文显示"></a><font size=3>2. 设置中文显示</font></h2><p>目前 NexT 支持的语言如以下表格所示：</p>
<table>
<thead>
<tr>
<th>语言</th>
<th>代码</th>
<th>设定示例</th>
</tr>
</thead>
<tbody><tr>
<td>English</td>
<td><code>en</code></td>
<td><code>language: en</code></td>
</tr>
<tr>
<td>简体中文</td>
<td><code>zh-Hans</code></td>
<td><code>language: zh-CN</code></td>
</tr>
<tr>
<td>Français</td>
<td><code>fr-FR</code></td>
<td><code>language: fr-FR</code></td>
</tr>
<tr>
<td>Português</td>
<td><code>pt</code></td>
<td><code>language: pt</code> or <code>language: pt-BR</code></td>
</tr>
<tr>
<td>繁體中文</td>
<td><code>zh-hk</code> 或者 <code>zh-tw</code></td>
<td><code>language: zh-hk</code></td>
</tr>
<tr>
<td>Русский язык</td>
<td><code>ru</code></td>
<td><code>language: ru</code></td>
</tr>
<tr>
<td>Deutsch</td>
<td><code>de</code></td>
<td><code>language: de</code></td>
</tr>
<tr>
<td>日本語</td>
<td><code>ja</code></td>
<td><code>language: ja</code></td>
</tr>
<tr>
<td>Indonesian</td>
<td><code>id</code></td>
<td><code>language: id</code></td>
</tr>
<tr>
<td>Korean</td>
<td><code>ko</code></td>
<td><code>language: ko</code></td>
</tr>
</tbody></table>
<p>编辑站点配置文件，将 <code>language</code> 设置成需要的语言。</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vim ~/02MyBlog/hexofiles/_config.yml</span><br></pre></td></tr></table></figure>

<p>修改如下</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Site</span></span><br><span class="line"><span class="attr">title:</span> <span class="string">一世繁华</span></span><br><span class="line"><span class="attr">subtitle:</span> <span class="string">记录点点滴滴</span></span><br><span class="line"><span class="attr">description:</span> <span class="string">选择远方，便只顾风雨兼程</span></span><br><span class="line"><span class="attr">keywords:</span></span><br><span class="line"><span class="attr">author:</span> <span class="string">qidaink</span></span><br><span class="line"><span class="attr">language:</span> <span class="string">zh-CN</span>                                         </span><br><span class="line"><span class="attr">timezone:</span> <span class="string">Asia/Shanghai</span></span><br></pre></td></tr></table></figure>

<h2 id="3-持久化链接"><a href="#3-持久化链接" class="headerlink" title="3. 持久化链接"></a><font size=3>3. 持久化链接</font></h2><p>使用Hexo后，默认的链接是<code>http://url/年/月/日/hello-world</code>这种类型的，这是由年&#x2F;月&#x2F;日&#x2F;标题组成。如果调整过日期会变化，另外标题是中文或存在特殊符号的时候这样的链接可能就有问题。</p>
<ul>
<li>安装插件</li>
</ul>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-abbrlink --save</span><br></pre></td></tr></table></figure>

<ul>
<li>修改站点配置文件</li>
</ul>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vim ~/02MyBlog/hexofiles/_config.yml</span><br></pre></td></tr></table></figure>

<p>添加修改如下内容</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># URL</span></span><br><span class="line"><span class="comment">## If your site is put in a subdirectory, set url as &#x27;ht    tp://example.com/child&#x27; and root as &#x27;/child/&#x27;</span></span><br><span class="line"><span class="attr">url:</span> <span class="string">http://example.com</span></span><br><span class="line"><span class="attr">root:</span> <span class="string">/</span></span><br><span class="line">  <span class="comment">#permalink: :year/:month/:day/:title/</span></span><br><span class="line"><span class="attr">permalink:</span> <span class="string">post/:abbrlink.html</span></span><br><span class="line"><span class="attr">abbrlink:</span></span><br><span class="line">  <span class="attr">alg:</span> <span class="string">crc32</span> <span class="comment"># 算法：crc16(default) and crc32</span></span><br><span class="line">  <span class="attr">rep:</span> <span class="string">hex</span>    <span class="comment"># 进制：dec(default) and hex</span></span><br><span class="line"><span class="attr">permalink_defaults:</span></span><br><span class="line"><span class="attr">pretty_urls:</span>                                            </span><br><span class="line">  <span class="attr">trailing_index:</span> <span class="literal">true</span> <span class="comment"># Set to false to remove trailing</span></span><br><span class="line">  <span class="attr">trailing_html:</span> <span class="literal">true</span> <span class="comment"># Set to false to remove trailing </span></span><br></pre></td></tr></table></figure>

<h2 id="4-开启代码高亮"><a href="#4-开启代码高亮" class="headerlink" title="4. 开启代码高亮"></a><font size=3>4. 开启代码高亮</font></h2><p>编辑站点配置文件</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vim ~/02MyBlog/hexofiles/_config.yml</span><br></pre></td></tr></table></figure>

<p>修改部分如下，文字自动检测默认不启动，所以改成<code>true</code>使其起作用。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">highlight:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">line_number:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">auto_detect:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">tab_replace:</span> <span class="string">&#x27;&#x27;</span></span><br><span class="line">  <span class="attr">wrap:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">hljs:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure>

<h2 id="5-图片延迟加载"><a href="#5-图片延迟加载" class="headerlink" title="5. 图片延迟加载"></a><font size=3>5. 图片延迟加载</font></h2><p>访问到图片的时候才会去请求图片资源，可以提高博客的访问速度。</p>
<ul>
<li>安装<code>hexo-lazyload-image</code>插件</li>
</ul>
<p>在站点根目录下执行以下命令：</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-lazyload-image --save</span><br></pre></td></tr></table></figure>

<ul>
<li>配置站点配置文件</li>
</ul>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vim ~/02MyBlog/hexofiles/_config.yml</span><br></pre></td></tr></table></figure>

<p>增加内容如下：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 插件实现图片懒加载，提高博客访问速度</span></span><br><span class="line"><span class="attr">lazyload:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">onlypost:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">loadingImg:</span>  <span class="comment"># eg. ./images/loading.png</span></span><br></pre></td></tr></table></figure>

<p><code>onlypost</code>：是否仅文章中的图片做懒加载, 如果为 false, 则主题中的其他图片, 也会做懒加载, 如头像, logo 等任何图片.</p>
<p><code>loadingImg</code>：图片未加载时的代替图.</p>

    </div>

    
    
    

    <footer class="post-footer">




    <div>
        
            <div style="text-align:center;color: #ccc;font-size:14px;">
            ----------本文结束
            <i class="fas fa-fan fa-spin" style="color: #FF1493; font-size: 1rem"></i>
            感谢您的阅读----------
            </div>
        
    </div>





  
  <div class="my_post_copyright"> 
    <p><span>文章标题:</span><a href="/post/e88b47fb.html">LV02-NexT-02-自定义一</a></p>
    <p><span>文章作者:</span><a href="/" title="欢迎访问 《苏木》 的学习笔记">苏木</a></p>
    <p><span>发布时间:</span>2023年07月02日 - 16:16</p>
    <p><span>最后更新:</span>2025年06月14日 - 00:25</p>
    <p><span>原始链接:</span><a href="/post/e88b47fb.html" title="LV02-NexT-02-自定义一">https://sumumm.github.io/post/e88b47fb.html</a></p>
    <p><span>许可协议:</span><i class="fab fa-creative-commons"></i> <a rel="license" href= "https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>  
  </div>
  


          <div class="post-tags">
              <a href="/tags/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/" rel="tag"><i class="fa fa-tag"></i> 博客搭建</a>
          </div>

        

          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/post/4e048824.html" rel="prev" title="LV02-NexT-03-自定义二">
                  <i class="fa fa-angle-left"></i> LV02-NexT-03-自定义二
                </a>
            </div>
            <div class="post-nav-item">
                <a href="/post/d1be343.html" rel="next" title="LV02-NexT-01-简介与安装">
                  LV02-NexT-01-简介与安装 <i class="fa fa-angle-right"></i>
                </a>
            </div>
          </div>
    </footer>
  </article>
</div>






</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">

  <div class="copyright">
    &copy; 2017 – 
    <span itemprop="copyrightYear">2025</span>
    <span class="with-love">
      <i class="fa fa-heart"></i>
    </span>
    <span class="author" itemprop="copyrightHolder">苏木</span>
  </div>
<div class="wordcount">
  <span class="post-meta-item">
    <span class="post-meta-item-icon">
      <i class="fa fa-chart-line"></i>
    </span>
      <span>站点总字数：</span>
    <span title="站点总字数">3.7m</span>
  </span>
  <span class="post-meta-item">
    <span class="post-meta-item-icon">
      <i class="fa fa-coffee"></i>
    </span>
      <span>站点阅读时长 &asymp;</span>
    <span title="站点阅读时长">225:26</span>
  </span>
</div>




    <span id="sitetime"></span>
    <script defer language=javascript>
        function siteTime()
        {
            window.setTimeout("siteTime()", 1000);
            var seconds = 1000;
            var minutes = seconds * 60;
            var hours = minutes * 60;
            var days = hours * 24;
            var years = days * 365;
            var today = new Date();
            var todayYear = today.getFullYear();
            var todayMonth = today.getMonth()+1;
            var todayDate = today.getDate();
            var todayHour = today.getHours();
            var todayMinute = today.getMinutes();
            var todaySecond = today.getSeconds();
            /*==================================================
            Date.UTC() -- 返回date对象距世界标准时间(UTC)1970年1月1日午夜之间的毫秒数(时间戳)
            year        - 作为date对象的年份，为4位年份值
            month       - 0-11之间的整数，做为date对象的月份
            day         - 1-31之间的整数，做为date对象的天数
            hours       - 0(午夜24点)-23之间的整数，做为date对象的小时数
            minutes     - 0-59之间的整数，做为date对象的分钟数
            seconds     - 0-59之间的整数，做为date对象的秒数
            microseconds - 0-999之间的整数，做为date对象的毫秒数
            ==================================================*/
            var t1 = Date.UTC(2017, 
                              5, 
                              19, 
                              0, 
                              0, 
                              0); //北京时间
            var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond);
            var diff = t2-t1;
            var diffYears = Math.floor(diff/years);
            var diffDays = Math.floor((diff/days)-diffYears*365);
            var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours);
            var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes);
            var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds);
            document.getElementById("sitetime").innerHTML="已在这里 "+diffYears+" 年 "+diffDays+" 天 "+diffHours+" 小时 "+diffMinutes+" 分钟 "+diffSeconds+" 秒";
        }
        siteTime();
    </script>



    </div>
  </footer>

  
  <div class="back-to-top" role="button" aria-label="返回顶部">
    <i class="fa fa-arrow-up fa-lg"></i>
    <span>0%</span>
  </div>
  <div class="reading-progress-bar"></div>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/next-theme-pjax/0.6.0/pjax.min.js" integrity="sha256-vxLn1tSKWD4dqbMRyv940UYw4sXgMtYcK6reefzZrao=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fancyapps-ui/5.0.28/fancybox/fancybox.umd.js" integrity="sha256-ytMJGN3toR+a84u7g7NuHm91VIR06Q41kMWDr2pq7Zo=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lozad.js/1.16.0/lozad.min.js" integrity="sha256-mOFREFhqmHeQbXpK2lp4nA3qooVgACfh88fpJftLBbc=" crossorigin="anonymous"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/next-boot.js"></script><script src="/js/pjax.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/hexo-generator-searchdb/1.4.1/search.js" integrity="sha256-1kfA5uHPf65M5cphT2dvymhkuyHPQp5A53EGZOnOLmc=" crossorigin="anonymous"></script>
<script src="/js/third-party/search/local-search.js"></script>




  <script src="/js/third-party/fancybox.js"></script>

  <script src="/js/third-party/pace.js"></script>


  




  

  <script class="next-config" data-name="enableMath" type="application/json">false</script><script class="next-config" data-name="mathjax" type="application/json">{"enable":true,"tags":"none","js":{"url":"https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-mml-chtml.js","integrity":"sha256-MASABpB4tYktI2Oitl4t+78w/lyA+D7b/s9GEP0JOGI="}}</script>
<script src="/js/third-party/math/mathjax.js"></script>


 
        <div id="click-show-text"
            data-mobile = false
            data-text = 富强,民主,文明,和谐,自由,平等,公正,法制,爱国,敬业,诚信,友善
            data-fontsize = 15px
            data-random= false>
        </div>
       

      
        <script async src=https://cdn.jsdelivr.net/npm/hexo-next-mouse-effect@latest/click/showText.js></script>
      

      
    




    <script async src="/js/fancybox_param.js"></script>





<!-- APlayer本体 -->



</body>
</html>
